将父组件的数据传输到子组件的正确方法（元素UI，Vue.js）？

Question

我使用的是元素界面，有一个el-switch组件（如复选框），我不明白我如何使用内部其他组件（el-table - ＆gt; el-column - ＆gt; el-switch）。

以下是代码：

＆＃13;

＆＃13;

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')

＆＃13;

@import url("//unpkg.com/element-ui@1.4.3/lib/theme-default/index.css");

＆＃13;

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.3/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>

＆＃13;

＆＃13;

＆＃13;

现在问题是点击开关不起作用，直到你调整窗口大小（很奇怪）。由于某种原因，点击切换行中的两个开关..

我很困惑。只想在单元格中有一个开关，但无法理解如何操作。

我将非常感谢任何帮助。

Answer 1

您绑定到scope.row.check，但由于row.check不存在，Vue无法识别它已更改。

但是，row.check 正在创建，并且调整窗口大小显然会触发重新渲染，迫使Vue查看scope.row.check。这就是你看到这种情况发生的原因。

您需要分别绑定到scope.row.panelNotification.check和scope.row.slackNotification.check。

Here's a working fiddle.