嗨，我在收到 eventbus 事件后沒有更新的 v-if 有問題。這是我的代碼：
<template>
<div class="main">
<button v-if="inCreationMode()">
Make a new snippet
</button>
<button v-if="mode ==='edit'">Push edits</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mode: "creation",
};
},
created() {
this.emitter.on("editSnippet", snippet => function(snippet){
this.mode = "edit";
});
},
};
</script>我嘗試用函式替換 v-if 條件：
<template>
<div class="main">
<button v-if="inCreationMode()">
Make a new snippet
</button>
<button v-if="inEditMode()">Push edits</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mode: "creation",
};
},
created() {
this.emitter.on("editSnippet", snippet => function(snippet){
this.mode = "edit";
});
},
methods:{
inCreationMode() {
return this.mode === "creation";
},
inEditMode(){
return this.mode ==="edit";
}
}
};
</script>我也嘗試使用 this.$forceUpdate() 。有誰知道這個問題的解決方案。提前致謝。
uj5u.com熱心網友回復：
在這種情況下，您應該使用計算屬性而不是方法：
<template>
<div class="main">
<button @click=" inCreationMode() " v-if="inCreationMode">
Make a new snippet
</button>
<button v-if="inEditMode">Push edits</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mode: "creation",
};
},
created() {
this.emitter.on("editSnippet", snippet => function(snippet){
this.mode = "edit";
});
},
computed:{
inCreationMode() {
return this.mode === "creation";
},
inEditMode(){
return this.mode ==="edit";
}
}
};
</script>
注意：()從v-if值中洗掉
uj5u.com熱心網友回復：
我在這里看到了很多問題，這可能是它無法正常作業的部分原因。鑒于您已將發射器定義為new Vue()，并將其正確添加到 Vue 原型中，并且發出事件的組件通過this.emitter.emit('editSnippet'). 你必須：
代替
this.emitter.on("editSnippet", snippet => function(snippet){ this.mode = "edit"; });
和
this.emitter.on("editSnippet", () => { this.mode = "edit";});
原因：
- 你必須使用箭頭函式，否則
this將不會參考你的組件。 - 你的回呼應該是一個“做某事”的函式，而不是一個回傳函式的函式（不會被呼叫）
進一步改進（可選）：
- 使用計算道具代替其他答案中描述的方法
- 使用 清理
beforeUnmount(或beforeDestroy) 中的偵聽器this.emitter.off...。實際上并不是真正可選的，不這樣做至少是非常糟糕的代碼風格
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370464.html