我需要在选中或未选中复选框时显示或隐藏块。复选框是组件,包括布局在内。选择必须在布局中显示或隐藏的内容。例如:
布局页面:
<template lang="pug">
div
checkbox(caption="test")
div(v-if="showExtend")
p lorem ipsum
</template>
<script>
data() {
return: {
showExtend: false
}
}
</script>
复选框组件:
<template lang="pug">
label
input(type="checkbox", :name="name", :checked="checked")
span(v-html="caption")
</template>
<script>
props: {
caption: {
type: String
},
name: {
type: String,
required: true
},
checked: {
type: Boolean
}
}
</script>
答案 0 :(得分:0)
您在复选框组件输入元素中缺少@change
事件,在您的示例中,您具有1向绑定。参见:https://forum.vuejs.org/t/custom-checkbox-component/1120/5,自定义v模型:https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
复选框组件:
<template lang="pug">
label
input(type="checkbox", :name="name", :checked="value", @change="$emit('input', $event.target.checked)")
span(v-html="caption")
</template>
<script>
props: ["caption", "name", "value"]
</script>
布局:
<template lang="pug">
div
checkbox(caption="test", v-model="showExtend")
div(v-if="showExtend")
p lorem ipsum
</template>
<script>
data() {
return: {
showExtend: false
}
}
</script>
您可以对其进行测试:
new Vue({el:'#layout', data:{showExtend:false}})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<template id="checkbox">
<label>
<input type="checkbox" :name="name" :checked="value" @change="$emit('input', $event.target.checked)">
<span v-html="caption"></span>
</label>
</template>
<script>
Vue.component('checkbox', {template:'#checkbox', props: ["caption", "name", "value"]})
</script>
<div id="layout">
<checkbox caption="test" v-model="showExtend"></checkbox>
<div v-if="showExtend">lorem ipsum</div>
</div>