Vue.js 中不更新组件就不能更新数据吗? [英] Is it impossible to update data without update a component in Vue.js?

查看：30
本文介绍了Vue.js 中不更新组件就不能更新数据吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有模板

<p v-for="项目中的项目">{{ 物品 }}</p>

有数据

数据:{项目:[1, 2, 3]}

问题:更新 DOM 后，我尝试实现数据，但更新数据导致重新渲染组件.

预期结果:

问题:如何在更新DOM后同步数据?

现场演示

解决方案

下面是Vue实现拖放的一个简单demo.

  1. 创建一个 watch，它将监视 this.dragedItem.如果更改，它将重新计算适用于dragItems 的样式.

  2. 当拖动开始时，获取当前拖动项(dragedItem=current item).

  3. 当拖动结束时，重置拖动项(dragedItem={})，

  4. 当drop时，从dragItems中移除item，然后push到dropItems.

在上面的步骤中，我们只需要改变数据，然后Vue就会自动渲染.

您可以查看HTML Drag And Drop API更多详情.

过渡效果可以查看Vue Guide: Enter/Leave Transition和 Vue 指南:状态转换.

app = new Vue({el: "#app",数据: {dragItems: ['A', 'B', 'C', 'D'],拖动项目:{}，掉落物品:[]，样式:{}，defaultStyle: {'opacity': '', 'background-color': 'yellow'}},手表: {拖动项目:函数(){this.styles = this.dragItems.reduce((pre, cur) => {pre[cur] = cur === this.dragedItem.item ?{'opacity': 0.5, 'background-color': 'blue'} : {'opacity': '', 'background-color': 'yellow'}返回预}, {})}},方法: {onDragStart: 函数 (ev, item, index) {ev.dataTransfer.setData('text/plain',null)this.dragedItem = {item, index}},onDragEnd: 函数 (ev) {this.dragedItem = {}},onDrop: 函数 (ev) {this.dropItems.push(this.dragedItem.item)this.dragItems.splice(this.dragItems.index, 1)}}})

.dragzone {显示:弹性；弹性方向:行；}.dragger {宽度:30px；高度:30px；文本对齐:居中；边框:1px纯灰色；}.拖放区 {宽度:200px；高度:30px；背景:绿色；填充:10px；显示:弹性；弹性方向:行；}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"><;/脚本><div id="应用程序"><div class="dragzone"><div class="dragger" draggable="true"v-for="(item, index) in dragItems" :key="index":style="styles[item] ?styles[item] : defaultStyle"@dragstart="onDragStart($event, item, index)"@dragend="onDragEnd($event)">{{物品}}

<div class="dropzone" @drop.prevent="onDrop($event)"@dragover.prevent=""><div class="dragger" style="background-color:yellow" draggable="true" v-for="(item, index) in dropItems" :key="index">{{物品}}

There is a template

<div class="wrap">
   <p v-for="item in items">
     {{ item }}
   </p>
</div>

There is a data

data: {
  items: [1, 2, 3]
}

Problem: after update DOM I trying to actualization data, but update a data causes to re-rendering a component.

Expected result:

Question: how to synchronisation data after update DOM?

Live demo

解决方案

Below is one simple demo on the implemention of drag/drop by Vue.

  1. Create one watch, it will watch this.dragedItem. if changed, it will re-calculate the styles which apply to the dragItems.

  2. When drag start, get current dragging item (dragedItem=current item).

  3. When drag end, reset dragging item (dragedItem={}),

  4. When drop, remove item from dragItems, then push to dropItems.

In above steps, we just need to change the data, then Vue will auto render.

You can check HTML Drag And Drop API for more details.

For the transition effects, you can check Vue Guide: Enter/Leave Transition and Vue Guide: State Transtion.

app = new Vue({
  el: "#app",
  data: {
    dragItems: ['A', 'B', 'C', 'D'],
    dragedItem: {},
    dropItems: [],
    styles: {},
    defaultStyle: {'opacity': '', 'background-color': 'yellow'}
  },
  watch: {
    dragedItem: function () {
      this.styles = this.dragItems.reduce((pre, cur) => {
        pre[cur] = cur === this.dragedItem.item ? {'opacity': 0.5, 'background-color': 'blue'} : {'opacity': '', 'background-color': 'yellow'}
        return pre
      }, {})
    }
  },
  methods: {
    onDragStart: function (ev, item, index) {
      ev.dataTransfer.setData('text/plain',null)
      this.dragedItem = {item, index}
    },
    onDragEnd: function (ev) {
      this.dragedItem = {}
    },
    onDrop: function (ev) {
      this.dropItems.push(this.dragedItem.item)
      this.dragItems.splice(this.dragedItem.index, 1)
    }
  }
})

.dragzone {
  display:flex;
  flex-direction: row;
}

.dragger {
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid gray;
}

.dropzone {
  width: 200px;
  height: 30px;
  background: green;
  padding: 10px;
  display:flex;
  flex-direction: row;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="dragzone">
    <div class="dragger" draggable="true" 
    v-for="(item, index) in dragItems" :key="index"
    :style="styles[item] ? styles[item] : defaultStyle"
    @dragstart="onDragStart($event, item, index)" 
    @dragend="onDragEnd($event)"
    >
      {{item}}
    </div>
  </div>
  <div class="dropzone" @drop.prevent="onDrop($event)"
    @dragover.prevent=""
  >
    <div class="dragger" style="background-color:yellow" draggable="true" v-for="(item, index) in dropItems" :key="index">
      {{item}}
    </div>
  </div>
</div>

这篇关于Vue.js 中不更新组件就不能更新数据吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆