vue 组件中数组的更新

今天写项目时遇到的问题,瞬间就卡在那了

来还原一下:

parent.vue:

<template>
  <div>
        <button @click="change">change</button>
        <input type="text" v-model="list" name="">
        <child v-for="item in list" :key="item.id" :list="item.list"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'parent',
  data () {
    return {
      list:[{id:1,type:1},{id:2,type:2},{id:3,type:3}]
    }
  },methods:{
      change(){
          console.log(this)
          console.log(this.$set)
          setTimeout(()=>{
               this.list[1]['list'] = {a:1,b:2,c:3}
          },1000)
      }
  },
  components:{
      child
  },
  watch:{
      // list:{
   //    handler: function (val, oldVal) { console.log(val,oldVal) },
   //    deep: true
   //  }
  },computed:{
      // test:function(){
      //     console.log(this.list)
      //     return this.list
      // }
  }
}
</script>

<style scoped>
</style>

 

child.vue

<template>
    <div class="border">
        {{list.a}}<br />
        {{list.b}}<br />
        {{list.c}}
    </div>
</template>
<script>
    export default{
        props:{
            list:{
                default:()=>{return{a:0,b:0,c:0}}
            }
        },
        data(){
            return{
                // newList:this.list
            }
        },
        computed:{
            // newList:()=>{
            //     console.log(this.list)
            //     return this.list
            // }
        }
    }
</script>
<style>
    .border{
        border:1px solid #ddd;
    }
</style>

我预想中的正常情况应该是点击按钮,,然后 页面上的 000 000 000 变成 000 123 000 ,

但是就是没有变化看了下 vue 文档先试试是不是子组件检测的值出了问题,

然后我在子组件中添加了 watch和 computed 结果都是无效的;

后来我搜索了页面,发了了一个全局函数 :

Vue.set();

他的效果:

Vue.set( target, key, value )

• 参数：

  • {Object | Array} target
  • {string | number} key
  • {any} value

• 返回值：设置的值。

• 用法：

  设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

终于被我找到了关键的地方了,但是在组件中怎么使用全局指令呢?

我后面又发现了 this.$set这个函数是完全一样的;

所以高兴的用上了:

正确用法:

methods:{
      change(){
          setTimeout(()=>{
　　　　　　　　this.list[1]['list'] = {a:1,b:2,c:3}//这样写 data 并不会检测
　　　　　　　　this.$set(this.list[1],'list',{a:1,b:2,c:3})//正确的写法

          },1000)
      }

 

这个坑,浪费了我几个小时,虽然我用 v-if 也解决了,但是总是不甘心,晚上继续研究终于让我解决了;

引以为戒;