我对 vue js 很陌生。我只是从 laracasts 学习使用它。我想要做的是在根类和子类之间进行通信。在这里，用户将输入一个优惠券代码，当他改变焦点时，它会显示一个文本。
我的html代码是这样的
<body>
<div id="root">
<coupon @applied="couponApplied">
<h1 v-if="isCouponApplied">You have applied the coupon.</h1>
</div>
<script src="https://unpkg.com/vue@2.5.21/dist/vue.js"></script>
<script src="main.js"></script>
</body>
我的main.js是这样的，
Vue.component('coupon', {
template: '<input @blur="applied">',
methods: {
applied()
{
this.$emit('applied');
}
}
});
new Vue({
el: '#root',
data: {
isCouponApplied:false,
},
methods:{
couponApplied()
{
this.isCouponApplied = true;
}
}
});
我正在检查在 chrome 中使用 vue devtools 扩展。没有错误。触发模糊事件。 isCouponApplied 也变为 true。但是 h1 没有显示。谁能告诉我我在哪里犯了错误？
最佳答案
问题是您没有关闭 <coupon>标签
<div id="root">
<coupon @applied="couponApplied"></coupon>
<h1 v-if="isCouponApplied">You have applied the coupon.</h1>
</div>
应该可以解决您的问题。如果你不关闭你的标签，解析器会自动关闭它，但它会在它的包装容器(根 div)结束时关闭它，所以 h1内容将被视为在 <coupon> 中元素，并将替换为您的组件的模板。
关于vue.js - 为什么当 bool 值改变时 v-if 不显示标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54740432/