无法让 el-checkbox 在 Element UI 插槽内工作

Question

这是我的代码：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <el-table :data="tableData" style="width: 100%">

        <el-table-column label="id" width="220"> 
           <template slot-scope="scope"> {{ scope.row.id }}</template>
        </el-table-column>

        <el-table-column label="name" width="220"> 
           <template slot-scope="scope"> {{ scope.row.name }}</template>
        </el-table-column>    

     <el-table-column label="status" width="120"> 
             <template slot-scope="scope"><el-checkbox v-model="!scope.row.isEnabled" ></el-checkbox> </template>
    </el-table-column>         

  </el-table>
</div>

    var Main = {
      data() {
          return {
                tableData: [
                {id: 1, name: "One", isEnabled: false},
                {id: 2, name: "Two", isEnabled: false},
                {id: 3, name: "Three", isEnabled: false},
                {id: 4, name: "Four", isEnabled: true},
              ],

          }
        },
        created() {

        },
        methods: {

       }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

当我点击复选框时出现错误：Cannot set reactive property on undefined, null, or primitive value: false。

如何让复选框在范围内工作？我看到在单击复选框时更新模型中的数据。

Answer 1

根据 Vue 的文档，v-model="item.prop" 只是语法糖： v-bind:value="item.prop" v-on:input="item.prop = $event.target.value".

因此，如果我们使用您当前的实现，它将如下所示：

<el-checkbox v-bind:value="!scope.row.isEnabled" v-on:input="!scope.row.isEnabled = $event.target.value"></el-checkbox>

如果我没记错的话，将其分配为 !scope.row.isEnabled 将意味着您将 undefined 属性分配给了 v-model，这就是出现此错误的原因。

Cannot set reactive property on undefined, null, or primitive value: false

要解决它，请从 v-model 作业中删除 !。

<el-checkbox v-model="scope.row.isEnabled" ></el-checkbox>

这会将复选框的新值分配给 scope.row.isEnabled。

见working implementation

无法让 el-checkbox 在 Element UI 插槽内工作

Can't get el-checkbox works inside of Element UI slot

vue.js

element-ui