时间戳

首页 > 解决方案 > 为什么当布尔值更改时 v-if 不显示标题？

vue.js - 为什么当布尔值更改时 v-if 不显示标题？

问题描述

我对 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也变为真。但是 h1 没有显示。谁能告诉我我在哪里犯了错误？

标签： vue.jsvuejs2

解决方案

问题是您没有关闭<coupon>标签

<div id="root">
    <coupon @applied="couponApplied"></coupon>
    <h1 v-if="isCouponApplied">You have applied the coupon.</h1>
</div>

应该解决你的问题。如果您不关闭标签，解析器将自动关闭它，但它会在其包装容器（根 div）关闭时这样做，因此h1内容将被视为<coupon>元素内部，并将被替换通过组件的模板。

推荐阅读