我的 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”我在這里想念什么?
Vue.js - 綁定到組件的道具未顯示正確的結果
喵喵時光機
2022-05-22 16:03:27