javascript - Vue.js - 绑定到组件的道具未显示正确的结果
问题描述
我的 Vue.js 应用程序中有这个 SwitchButton 组件,它有一个自定义事件“切换”。单击(切换)按钮时,切换事件将 isEnabled 设置为 false 或 true。没有问题,但是当我将父组件中的 isEnabled 绑定到 SwitchButton 子组件以设置其初始值时,它似乎不起作用。
父组件中使用的代码(将 isEnabled true 作为初始值)
<SwitchButton v-model="distSwitch" :isEnabled="true">
<label slot="left">{{ $t('general.dealer') }}</label>
<label slot="right">{{ $t('general.wholesale') }}</label>
</SwitchButton>
开关按钮组件:
<template>
<div class="switch-button-control">
<div class="switch-button-label">
<slot name="left"></slot>
</div>
<div class="switch-button" :class="{'enabled': isEnabled}" @click="toggle">
<div class="button"></div>
</div>
<div class="switch-button-label">
<slot name="right"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'SwitchButton',
model: {
prop: 'isEnabled',
event: 'toggle'
},
props: {
isEnabled: {
type: Boolean,
required: true
}
},
methods: {
toggle() {
this.$emit("toggle", !this.isEnabled);
}
},
created() {
/*eslint-disable no-console*/
console.log('isEnabled', this.isEnabled)
}
}
</script>
我希望创建的钩子中的 console.log 输出“isEnabled > true”,但它输出“false”
我在这里想念什么?
解决方案
由于该属性的值isEnabled
是由硬编码设置的true
,因此从子组件更改它是行不通的。
在父组件中初始化数据变量并设置为属性可以在这里提供帮助。
模板:
<SwitchButton v-model="distSwitch" :isEnabled="isEnabled" @toggle="toggleIsEnabled">
<label slot="left">{{ $t('general.dealer') }}</label>
<label slot="right">{{ $t('general.wholesale') }}</label>
</SwitchButton>
数据:
data:()=>{
return {
isEnabled:true
}
}
在该部分中创建一个方法methods
:
toggleIsEnabled:function(value){
this.isEnabled = value;
}
SwitchButton
使用自定义事件发射器从组件发出的值toggle
将触发父组件中的回调函数toggleIsEnabled
。
推荐阅读
- java - 从 X 到扩展 X 的泛型类型的未经检查的强制转换
- javascript - 用所需的图像替换 Font Awesome 图标
- css - 根据移动 Web 应用的屏幕尺寸构建自动调整元素大小是否是一种好习惯?
- ios - 在出现在 iOS 之前添加按钮渐变
- python - 使用 for 循环将字符串附加到列表中,其中附加的每个项目都是一个新字符串
- arduino - 如何从串行监视器读取字符数组并相应地命令arduino?
- c++ - 如何为项目本身、构建产品和源文件创建一个具有不同位置的简单 CLion C++ CMake 项目
- datatables - 确认抽奖已完成
- python - TensorFlow中应该如何实现欧拉积分?
- vue.js - VueJS如何过滤一个mapgetter数组