Question

我对vue js还是很陌生。我只是从laracast中学习使用它。我想做的是在根类和子类之间进行通信。在这里，用户将放置一个优惠券代码，当他改变焦点时它将显示一个文本。

我的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没有显示。谁能告诉我我哪里做错了？

Answer 1

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

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

应该解决您的问题。如果不关闭标签，解析器将自动关闭标签，但是它将在其包装容器（根div）关闭时自动关闭，因此h1内容将被视为位于{ {1}}元素，并将被您组件的模板取代。

为什么布尔值更改时v-if不会显示标题？

1 个答案: