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

无法在元素UI插槽内获取el-checkbox工程

1 个答案: