vue-dataは変更されましたが、ビューは更新されません

今日コードを書いたとき、データが変更されているのにビューが更新されていないことが
わかりました。Baiduはvm.items [indexOfItem] = newValueが検出できない
ことを発見しました。実際に検出できないことを確認するページを作成しました。次に、
ここに画像の説明を挿入します
出力が
ここに画像の説明を挿入します
見つかります。ビュー配列の変更に応答するには、
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
を設定します。

<template>
  <!-- 验证vm.items[indexOfItem] = newValue是否真的无效 -->
  <div>
    <div>{
    
    {
    
    aa}}</div>
    <ul>
      <li v-for="item in list"
          :key="item.id">
        {
    
    {
    
    item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    
    
  name: 'testWuXiao',
  data () {
    
    
    return {
    
    
      aa: 'abcdefg',
      list: [
        {
    
    
          id: '1', text: 'A'
        },
        {
    
    
          id: '2', text: 'A'
        }
      ]
    }
  },
  mounted () {
    
    
    this.aa = 'hijklmn'
    for (let i = 0; i < this.list.length; i++) {
    
    
      // this.list[i].text = 'B'
      this.$set(this.list[i], 'text', 'B')
    }
  }
}
</script>

<style scope lang="less">
</style>

おすすめ

転載: blog.csdn.net/yuyu_2019/article/details/112354858