我的Vue数据有问题（组件渲染问题）

Question

我正在从事VueJs项目，我是这个世界的新人。 我以前曾经将NodeJ和ExpressJ一起使用。

这是我的问题：

在文件“ App.vue”中

这是JS和HTML：

 new Vue({ el: '#mainComponents', data: { home: false, tower: false, faq: false, follow: false } }); 

 <template> <div class="mainComponents" id="mainComponents"> <nav> <ul> <li class="active li"><a v-on:click.native="home = true, faq = false, tower = false, follow = false" class="home active">Acceuil</a></li> <li class="li"><a v-on:click.native="tower = true, faq = false, home = false, follow = false" class="tower">Tower Ascension</a></li> <li class="li"><a v-on:click.native="faq = true, tower = false, home = false, follow = false" class="faq">FAQ</a></li> <li class="li"><a v-on:click.native="follow = true, faq = false, tower = false, home = false" class="follow">Nous suivre</a></li> </ul> </nav> <img class="gradient" src=""> <div id="typeContainer"> <home v-if="home = true" id="home"/> <tower v-if="tower = true" id="tower"/> <div v-if="faq = true" id="faq"/> <div v-if="follow = true" id="follow"/> </div> </div> </template> 

我想显示组件“ home”，然后单击“ Tower Ascension”导航元素后，我想隐藏“ home”并显示组件“ tower”。 问题是：加载时显示了2个组件，并且切换不起作用。

Answer 1

在组件的v-if语句中，您将true分配给home ，然后返回它，而不是将home与true进行比较。 比较是使用===而不是= 。

    <div id="typeContainer">
            <home v-if="home === true" id="home"/>
            <tower v-if="tower === true" id="tower"/>
            <div v-if="faq === true" id="faq"/>
            <div v-if="follow === true" id="follow"/>
    </div>

但是，您根本不需要进行比较，因为这些已经是布尔值：

    <div id="typeContainer">
            <home v-if="home" id="home"/>
            <tower v-if="tower" id="tower"/>
            <div v-if="faq" id="faq"/>
            <div v-if="follow" id="follow"/>
    </div>

而且，除非您要一次显示多个组件，否则维护一个存储当前页面名称的字符串可能比维护4个布尔值更容易。

JS：

new Vue({
  el: '#mainComponents',
  data: {
    currentComponent: "home"
  }
});

VUE：

<div id="typeContainer">
        <home v-if="currentComponent === 'home'" id="home"/>
        <tower v-if="currentComponent === 'tower'" id="tower"/>
        <div v-if="currentComponent === 'faq'" id="faq"/>
        <div v-if="currentComponent === 'follow'" id="follow"/>
</div>