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

JavaScript

村村老丝

2020-03-10

我是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>

第493篇《Vuejs和Vue.set(),更新数组》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
凯LEY 2020.03.10

编辑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 链接中可用的阵列突变方法的链接

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android