Vue 踩过的一些坑(持续更新)

如果在元素中绑定的属性，没有在对象中定义，改变改对象的值将不会对元素有效(可以从点击2个删除按钮的区别看出来)。例：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
<div id="app">
<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      min-width="300">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="danger"  size="small"
          v-loading="scope.row.loading">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
</div>

@import url("//unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css");

var Main = {
    methods: {
      handleClick(row) {
        row.loading = true
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('删除成功')
          row.loading = false
        }).catch(error => {
          row.loading = false
        })
        
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          loading: false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          //loading: false
        }]
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

在线运行