Right way to transfer parent component's data to the child one (Element UI, Vue.js)?

Question

I'm using Element UI, there is an el-switch component (like checkbox) and I don't understand how I can use it inside other components (el-table -> el-column -> el-switch).

Here's the code:

var Main = {
  data() {
    return {
      tableData: [
        {
          category: 'Ticket',
          panelNotification: {
            check: true,
            name: 'category1'
          },
          slackNotification: {
            check: true,
            name: 'panel1'
          },
          button: {
            name: 'slack1',
            value: 'slackValue1'
          }
        }, {
          category: 'Self ticket',
          panelNotification: {
            check: false,
            name: 'category2'
          },
          slackNotification: {
            check: true,
            name: 'panel2'
          },
          button: {
            name: 'slack2',
            value: 'slackValue2'
          }
        }, {
          category: 'Important ticket',
          panelNotification: {
            check: true,
            name: 'category3'
          },
          slackNotification: {
            check: true,
            name: 'panel3'
          },
          button: {
            name: 'slack3',
            value: 'slackValue3'
          }
        }
      ]
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>

<div id="app">

  <el-table :data="tableData">
    <el-table-column
      prop="category"
      label="category"
      width="180">
    </el-table-column>
    <el-table-column
      prop="panelNotification"
      label="panel notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="slackNotification"
      label="slack notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949"
          >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="button"
      width="120">
      <template scope="scope">
        <el-button>Save</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>

Now the problem is that click on the switch doesn't work, until you resize the window (weird ). And for some reason click toggles two switches in the row..

I'm confused. Just wanna have one switch in the cell, but can't understand how to do it.

I will be extremely grateful for any help.

Answer 1

You are binding to scope.row.check, but since row.check doesn't exist, Vue doesn't recognize that it changed.

However, row.check is getting created, and resizing the window is apparently triggering a re-render, forcing Vue to look at scope.row.check. That's why you're seeing that happen.

You need to bind to scope.row.panelNotification.check and scope.row.slackNotification.check, respectively.

Here's a working fiddle.