Vuejs和Vue.set（），更新数组

Question 1

我是Vuejs的新手。做了些什么，但我不知道这是简单/正确的方法。

我想要的是

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

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

我没有将push（）推送到数组，而是将其更新。。但是有时最后一项会被隐藏，以某种方式...我认为此解决方案有点不可靠，如何使其稳定？

简单的代码在这里：

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>

展开摘要

Question 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>

展开摘要

Question 3

编辑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)。

拼接仍然可用，这是vue链接中可用的阵列突变方法的链接。

Question 4

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

推（）
pop（）
转移（）
unshift（）
拼接（）
分类（）
逆转（）

在开发过程中，您面临一个问题-如何忍受它：)。

push（），pop（），shift（），unshift（），sort（）和reverse（）非常简单，在某些情况下可以为您提供帮助，但主要重点在于splice（）内，这使您可以有效地修改数组VueJ会跟踪该信息。因此，我可以分享一些最常用于数组的方法。

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

// 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链接您可以添加多个记录，删除多个记录等。

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)

Question 5

一种替代方法-更加轻便的解决问题的方法-可能是，只是临时编辑数组，然后将整个数组分配回您的变量。因为Vue不监视单个项目，所以它将监视整个变量。

因此，这也应该工作：

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

然后，这还将更新您的DOM。