Не удается установить el-checkbox внутри слота Element UI - PullRequest
Новая
       13

Не удается установить el-checkbox внутри слота Element UI

2 голосов
/ 03 апреля 2019

Вот мой код:

https://jsfiddle.net/23efpswu/

<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.

Как получить флажок работает внутри области?Я видел, чтобы обновить данные в модели при нажатии на флажок.

1 Ответ

2 голосов
/ 03 апреля 2019

Согласно документации 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.

См. рабочая реализация

...