按钮绑定禁用值变了，但是页面禁用效果不生效

Question

element+Vue 值变了，但是页面没有改变，不知道是什么问题
需求：
el-table每行有编辑的操作按钮，点击编辑按钮打开编辑表单el-dialog，在提交编辑信息后关闭弹窗并将el-table操作行的编辑按钮单行动态禁用15秒
我写的代码如下：

<el-table :data="tableData">
  <el-table-column  label="操作" min-width="140">
    <template slot-scope="scope">
      <el-button v-if="scope.row.isEdit=='0'" 
                 type="text"      
                 @click="handleClick(scope.row,scope.$index)"  
                 :disabled="scope.row.disable">编辑</el-button>
    </template>
  </el-table-column>
</el-table>  

<el-dialog title="编辑" :visible.sync="editForm" width="500px" append-to-body>
  <div></div>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit">确 定</el-button>
    <el-button @click="editForm=fasle">取 消</el-button>
  </div>
</el-dialog>

<script>
 export default {
  data(){
    return{
       tableData:[],
       editForm:false,
       activeRow:{},
       activeIndex:''
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      //tableData的数据是从接口获取的，我想对禁用按钮做单行动态处理，所以就定义了单行的disable属性
      this.tableData.forEach(item=>{ return item.disable=false})
    },
    handleClick(row,index){
      this.activeRow=row
      this.activeIndex=index
      this.editForm=true
    }，
    submit(){
      this.editForm=false
      this.$set(this.tableData[this.activeIndex],'disable',true)
      setTimeout(()=>{
        this.$set(this.tableData[this.activeIndex],'disable',false)
      },15000)
    }
  }
}
</script>

问题：this.tableData.forEach遍历进去的disable有值且$set时改变了，但是页面禁用效果不生效

Answer 1

可以加一个this.$forceUpdate() 强制更新 试试