web-dev-qa-db-ja.com

VuejsとVue.set（）、配列の更新

私はVuejsが初めてです。何かを作ったが、それが簡単で正しい方法であることを私は知らない。

私が欲しいもの

いくつかの日付を配列に入れて、イベントで更新します。最初にVue.setを試しましたが、うまくいきません。今私の配列項目を変更した後：

this.items[index] = val;
this.items.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>
javascriptvue.jsmomentjsvuejs2
52
Johan Hoeksma

このように配列を操作した場合、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>
31
Borjante

編集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で利用可能な配列突然変異方法へのリンク link です。

74
Martin Calvert