Vue.set

Vue.set 为何存在

由于Javascript的限制,Vue不能自动检测以下变动的数组。

  • 当你利用索引直接设置一个项时,vue不会为我们自动更新。
  • 当你修改数组的长度时,vue不会为我们自动更新

使用:

Vue.set( target,key,value);

  target:改变的数据源(可以是对象或者数组)

  key:改变的具体数据

  value :重新赋的值

<template>
  <div id='index'>
      <header>你好,少年</header>
      <div v-for="item of dataList" :key="item"> {{item}} </div>
      <button @click="change"> change</button>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: 'index',
  data () {
    return {
      dataList: [
        111,555,'ldk','jgo','ani','nihao'
      ]
    };
  },
  computed: { },
  created () { },
  mounted () { },
  methods: {
    change:function(){
      // this.dataList[1] ='66';
      Vue.set(this.dataList,1,66);
    }
  }
}
原文地址:https://www.cnblogs.com/coffer/p/10270563.html