vue 数据更新不渲染

情景：

      在使用vue element的table表格时，想对table的cell进行编辑。

       点击修改实现如下功能：

代码：

<el-table-column
          label="名称">
          <template slot-scope="scope">
            <div v-if="scope.row.edit">
              <el-input
                v-model="scope.row.name"
                @blur="blurInput(scope.$index, scope.row)"/></div>
            <div
              v-else>{{ scope.row.name }}</div>
          </template>
        </el-table-column>

通过修改数组中对应数据的edit，来改变展示形式。 但是，当手动修改edit后，发现并没有重新渲染，而是在下次操作执行时才渲染。

数组更新检测

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

替换数组

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

通过上面的官方文档可知，vue的监听渲染视图更新是有条件限制的。

解决方法，是使用官方提供的$set()事件。

使用方法：

this.$set(this.menulist,index, row);

到此为止，视图可以正常更新了。做个总结，实际上vue的官方文档讲的很清晰，小伙伴们可以参考一下。