javascript - Vue js v-if在共享切换按钮上进行条件渲染
问题描述
//PARENT COMPONENT
<template>
....
<div class="input-wrapper">//Toggle button container
<label class="input-label">
SELECT YES OR NOT
</label>
<toggle //child component, toggle button
:options="shipping"
/>
</div>
<div
v-if="destiny[0].value"
class="input-wrapper">
<label class="input-label">
IF YES THIS CONTAINER WILL BE DISPLAYED
</label>
<toggle
:options="Options"
/>
</div>
.....
</template>
<script>
import Toggle from "....";
export default {
components: {
Toggle,
},
data: function () {
return {
destiny: [{
label: 'Yes',
value: true
},
{
label: 'No',
value: false
}
],
Options: [{
label: 'A',
value: 'a'
},
{
label: 'B',
value: 'b'
},
{
label: 'C',
value: 'c'
}]
}
}
}
</script>
///CHILD COMPONENT
<template>
<div class="toggle">
<button
v-for="option in options"
:key="option.value"
:class="{
active: option.value === value
}"
class="btn"
@click="() => toggleHandler(option.value)">{{ option.label }} .
</button>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true
}
},
data: function () {
return {
value: this.options[0].value
}
},
methods: {
toggleHandler (value) {
this.$emit('input', value)
this.value = value
}
}
}
</script>
有选项是或否的切换,如果选择是,则子组件将被渲染,否则将保持隐藏。我正在尝试使用条件来使用指令v-if或v-show将子组件显示到父组件中,但是我找不到将布尔值从子组件发送到父组件的方法。
解决方案
希望这可以帮助!!
// CHILD
Vue.component('child', {
template: '<div>TOGGLE:- <input type="checkbox" @click="emit"/></div>',
data() {
return {
checked: false
};
},
methods: {
emit: function() {
this.checked = !this.checked;
this.$emit('event_child', this.checked);
}
}
});
// PARENT
var vm = new Vue({
el: '#app',
data: function() {
return {
toggleStatus: false
}
},
methods: {
eventChild: function(checked) {
this.toggleStatus = checked;
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
<child v-on:event_child="eventChild"></child>
<div id="toggle">TOGGLE STATUS => {{toggleStatus}}</div>
</div>
推荐阅读
- java - 有没有办法从字节数组创建 FileInput 流而不在文件系统上存储文件?
- java-8 - 缺少 Apache Tomcat Native 库和页面无法显示
- tcp - Digital Ocean 上的负载平衡 Websocket
- javascript - 复制图像 URL 以输入
- vba - 创建循环目标、变量单元格和多行约束的 Excel 求解器宏
- python - 将 Clang 设置为 Windows 上 pip install 中使用的默认编译器
- java - Java maven项目中的retrive命令行-D选项
- java - 方法声明中的通配符与 SuperType
- text - Apache TIKA 与 PdfBox (HTML)
- sql - 向表中添加多行,错误