Vuejs和Vue.set(),更新数组

Question

我是Vuejs的新手.做了些什么,但我不知道这是简单/正确的方式.

我想要的是

我想在数组中有一些日期并在事件上更新它们.首先我尝试了Vue.set,但它没有成功.现在更改我的数组项后:

this.items[index] = val;
this.items.push();

我推送()没有任何数组,它会更新..但有时最后一项将被隐藏,不知何故......我认为这个解决方案有点hacky,我怎么能让它稳定？

简单的代码在这里:

new Vue({
  el: '#app',
  data: {
  	f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
    	console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);
  		this.items[index] = val;
      this.items.push();
      console.log("arr length:  " + this.items.length);
    }
  }
})

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>

Answer 1

编辑2

• 对于需要反应的所有对象更改使用Vue.set(object, prop, value)
• 对于数组突变,您可以在此处查看当前支持的列表

编辑1

对于vuex,你会想做 Vue.set(state.object, key, value)

原版的

所以只针对那些提出这个问题的人.它出现在Vue 2的某个时刻.*他们删除this.items.$set(index, val)了赞成this.$set(this.items, index, val).

Splice仍然可用,这里是vue 链接中可用的数组变异方法的链接.

Answer 2

如果您操纵这样的数组,VueJS无法将您的更改提取到状态.

正如Common Beginner Gotchas中所解释的那样,你应该使用push,splice等等数组方法,而不要像这样修改索引,a[2] = 2也不要修改数组的.length属性.

new Vue({
  el: '#app',
  data: {
  	f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
    	console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);


	  this.items.$set(index, val)
      console.log("arr length:  " + this.items.length);
    }
  }
})

ul {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>

Answer 3

如前所述 - VueJS 根本无法跟踪这些操作（数组元素分配）。VueJS 用数组跟踪的所有操作都在这里。但我会再次复制它们：

• 推（）
• 流行音乐（）
• 转移（）
• 取消移位（）
• 拼接（）
• 种类（）
• 逆转（）

在开发过程中，您会遇到一个问题——如何解决这个问题:)。

push()、pop()、shift()、unshift()、sort() 和 reverse() 非常简单，在某些情况下可以为您提供帮助，但主要焦点在于splice()，它允许您有效地修改数组这将由 VueJs 跟踪。所以我可以分享一些最常用于数组的方法。

您需要替换数组中的项目：

// note - findIndex might be replaced with some(), filter(), forEach() 
// or any other function/approach if you need 
// additional browser support, or you might use a polyfill
const index = this.values.findIndex(item => {
          return (replacementItem.id === item.id)
        })
this.values.splice(index, 1, replacementItem)

注意：如果您只需要修改项目字段 - 您可以通过以下方式进行：

this.values[index].itemField = newItemFieldValue

这将被 VueJS 跟踪，因为 item(Object) 字段将被跟踪。

您需要清空数组：

this.values.splice(0, this.values.length)

其实你可以用这个函数做更多的事情splice() - w3schools link 你可以添加多条记录，删除多条记录等。

Vue.set() 和 Vue.delete()

Vue.set() 和 Vue.delete() 可用于向 UI 版本的数据添加字段。例如，您的对象中需要一些额外的计算数据或标志。您可以为您的对象或对象列表（在循环中）执行此操作：

 Vue.set(plan, 'editEnabled', true) //(or this.$set)

并在 Axios 调用之前以相同的格式将编辑过的数据发送回后端：

 Vue.delete(plan, 'editEnabled') //(or this.$delete)