BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] VuejsとVue.set()、配列の更新

2022-12-09 16:39:28

質問

私は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>

どのように解決するのですか？

VueJSは、このように配列を操作すると、状態への変更をピックアップすることができません。

で説明したように 初心者にありがちなこと で説明したように、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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します