Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

<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>
    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')
When I am clicking on checkbox I am getting error: Cannot set reactive property on undefined, null, or primitive value: false.
How to get checkbox works inside scope? I seen to update data in model on click to checkbox.
According Vue's documentation, v-model="item.prop" is just syntactic sugar for:
v-bind:value="item.prop" v-on:input="item.prop = $event.target.value".
So if we use your current implementation, it would look like this:
<el-checkbox v-bind:value="!scope.row.isEnabled" v-on:input="!scope.row.isEnabled = $event.target.value"></el-checkbox>
If I'm not wrong, assigning it as !scope.row.isEnabled would mean you have  an undefined property assigned to your v-model and that's why this error occurs.
Cannot set reactive property on undefined, null, or primitive value: false
To solve it, remove the ! from the v-model assignment.
<el-checkbox v-model="scope.row.isEnabled" ></el-checkbox>
This will assign the new value of the checkbox to scope.row.isEnabled.
See working implementation
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.