web-dev-qa-db-ja.com

Vue配列内のオブジェクトを変更し、反応性をトリガーする

配列内のインデックスによって検出されたオブジェクトの一部を変更するときに更新をトリガーするにはどうすればよいですか？

ドキュメントでは、配列の値を変更する方法を示しています。

Vue.set(example1.items, indexOfItem, newValue)

または

example1.items.splice(indexOfItem, 1, newValue)

しかし、オブジェクトの残りを変更せずに、配列内のオブジェクトのプロパティの値を変更する方法は？

以下はプロパティを更新するために機能しますが、Vueは何かが更新をトリガーするまで変更に反応しません。

example1.items[indexOfItem].some_object_property = false
vue.jsvuejs2reactive
15
shanemgrey

Set（）を1回呼び出して、オブジェクトを（更新するプロパティで）配列に設定する限り、Vueはオブジェクトのプロパティの変更に反応します。アプリのデータで初期化されたオブジェクトの1つの配列と、マウント時に（Vue.set（）を使用して）手動で設定されたオブジェクトの別の配列を持つ例を次に示します。ボタンをクリックすると、それらの各配列の1つのオブジェクトのプロパティが更新され、Vueが反応します。 mount（）で発生するset（）呼び出しは、いつでも実際に発生する可能性があることに注意してください。

https://codepen.io/jordan-kalosal/pen/VrwjoR

new Vue({
  el: "#app",
  data: {
    arr: [
      {
        property: 'OBJ1 Prop'
      },
      {
        property: 'OBJ2 Prop'
      }
    ],
    setLater: false
  },
  mounted() {
    this.$set(this, 'setLater', [
      {
        property: 'setLater OBJ1 Prop'
      },
      {
        property: 'setLater OBJ2 Prop'
      }
    ])
  },
  methods: {
    _updateObjProps() {
      this.arr[0].property = (new Date()).toString();
      this.setLater[0].property = (new Date()).toString();
    }
  }
})
3
Jordan Haines

this.$set() を使用して、配列要素のサブプロパティを更新できます。たとえば、最初の2つの配列要素でxサブプロパティをインクリメントするには（サブプロパティが存在しない場合は作成します）：

methods: {
  update() {
    this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
    this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      arr: [
        {
          foo: {
            x: 100,
            y: 200
          }
        },
        {
          foo: {
            /* x does not exist here initially */
            y: 400
          }
        }
      ]
    };
  },

  methods: {
    update() {
      this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
      this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <button @click="update">Update</button>
  <p>arr[0]: {{ arr[0] }}</p>
  <p>arr[1]: {{ arr[1] }}</p>
</div>

codepen

9
tony19

ここに、配列内のオブジェクトの反応性の良い例を示すと思う別のデモ例を示します。ここで実際に試してみてください： https://codepen.io/antoniandre/pen/ZdjwKG

[〜＃〜] js [〜＃〜]

new Vue({
  el: "#app",
  data: {
    array: []
  },

  methods: {
    addTimeProp() {
      this.array.forEach(item => {
        this.$set(item, 'time', null)
      })
    },
    updateTimeProp() {
      this.array.forEach(item => {
        item.time = (new Date()).toString()
      })
    }
  },

  created () {
    this.array.Push({ name: 'today' }, { name: 'tomorrow' })
  }
})

HTML：PUG

#app
  h1 Reactivity of objects inside an array
  h2 Content of the array
  pre {{ array }}
  button(@click="array.Push({ name: 'another day' })") Add another object
  button(@click="addTimeProp") Add `time` property
  button(@click="updateTimeProp") Update `time` property
1
antoni