将父组件的数据传输到子组件(元素 UI、Vue.js)的正确方法?
Right way to transfer parent component's data to the child one (Element UI, Vue.js)?
我正在使用 Element UI,有一个 el-switch
组件(如复选框),但我不明白如何使用它 inside 其他组件 (el-table -> el-column -> el-switch).
代码如下:
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/element-ui@1.4.3/lib/theme-default/index.css");
<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>
现在的问题是点击开关不起作用,直到您调整 window 的大小(很奇怪)。出于某种原因,单击会切换行中的两个开关..
我很困惑。只想在手机里装一个开关,但不知道怎么做。
如有任何帮助,我将不胜感激。
您正在绑定到 scope.row.check
,但由于 row.check
不存在,Vue 无法识别它已更改。
但是,row.check
正在创建 ,并且调整 window 的大小显然会触发重新渲染,迫使 Vue 查看 scope.row.check
.这就是为什么你会看到这种情况发生。
您需要分别绑定到 scope.row.panelNotification.check
和 scope.row.slackNotification.check
。
我正在使用 Element UI,有一个 el-switch
组件(如复选框),但我不明白如何使用它 inside 其他组件 (el-table -> el-column -> el-switch).
代码如下:
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/element-ui@1.4.3/lib/theme-default/index.css");
<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>
现在的问题是点击开关不起作用,直到您调整 window 的大小(很奇怪)。出于某种原因,单击会切换行中的两个开关..
我很困惑。只想在手机里装一个开关,但不知道怎么做。
如有任何帮助,我将不胜感激。
您正在绑定到 scope.row.check
,但由于 row.check
不存在,Vue 无法识别它已更改。
但是,row.check
正在创建 ,并且调整 window 的大小显然会触发重新渲染,迫使 Vue 查看 scope.row.check
.这就是为什么你会看到这种情况发生。
您需要分别绑定到 scope.row.panelNotification.check
和 scope.row.slackNotification.check
。