Vuejs 和 Vue.set()，更新数组 [英] Vuejs and Vue.set(), update array

问题描述

我是 Vuejs 的新手.做了一些东西，但我不知道这是简单/正确的方法.

我想要的

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

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

我不向数组推送()任何东西，它会更新..但有时最后一项会被隐藏，不知何故......我认为这个解决方案有点hacky，我怎样才能使它稳定?

简单的代码在这里:

new Vue({el: '#app',数据: {f: 'DD-MM-YYYY',项目: ["10-03-2017",12-03-2017"]},方法: {cha:函数(索引，项目，什么，计数){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 长度:" + this.items.length);}}})

ul {列表样式类型:无；}

<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="应用程序"><ul><li v-for="(index, item) in items"><br><br><button v-on:click="cha(index, item, 'day', -1)">- 日</button>{{ 物品 }}<button v-on:click="cha(index, item, 'day', 1)">+ 天</button><br><br>

解决方案

如果您像这样操作数组，VueJS 无法获取您对状态的更改.

如常见初学者问题中所述，您应该使用数组方法，例如推，拼接或其他任何东西，永远不要修改像这样的索引a[2] = 2 也不要修改数组的 .length 属性.

new Vue({el: '#app',数据: {f: 'DD-MM-YYYY',项目: ["10-03-2017",12-03-2017"]},方法: {cha:函数(索引，项目，什么，计数){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 长度:" + this.items.length);}}})

ul {列表样式类型:无；}

<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="应用程序"><ul><li v-for="(index, item) in items"><br><br><button v-on:click="cha(index, item, 'day', -1)">- 日</button>{{ 物品 }}<button v-on:click="cha(index, item, 'day', 1)">+ 天</button><br><br>

I'm new to Vuejs. Made something, but I don't know it's the simple / right way.

what I want

I want some dates in an array and update them on a event. First I tried Vue.set, but it dind't work out. Now after changing my array item:

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

I push() nothing to the array and it will update.. But sometimes the last item will be hidden, somehow... I think this solution is a bit hacky, how can I make it stable?

Simple code is here:

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>

解决方案

VueJS can't pickup your changes to the state if you manipulate arrays like this.

As explained in Common Beginner Gotchas, you should use array methods like push, splice or whatever and never modify the indexes like this a[2] = 2 nor the .length property of an array.

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>

这篇关于Vuejs 和 Vue.set()，更新数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！