[Vuejs]-Is v-show not working on static elements?

by

2👍

✅

Don’t use v-show on the root element of the apps – probably treat the root element as not being part of the "vue" App at all, it’s just a container for the App

Instead, use it on the content

In your example, just the <p> but you may want to wrap actual content in a div or appropriate

const { createApp } = Vue;

let defaultApp = createApp({
    data() {
        return {
            isShow: true,
        };
    },
    watch: {
        isShow(val, oldVal) {
            console.log(`defaultApp.isShow( ${oldVal} -> ${val} )`);
        },
    },
}).mount("#default-content");
let bootstrapApp = createApp({
    data() {
        return {
            isShow: false,
        };
    },
    watch: {
        isShow(val, oldVal) {
            console.log(`bootstrapApp.isShow( ${oldVal} -> ${val} )`);
        },
    },
}).mount("#bootstrap-content");
let vueApp = createApp({
    data() {
        return {
            isShow: false,
        };
    },
    watch: {
        isShow(val, oldVal) {
            console.log(`vueApp.isShow( ${oldVal} -> ${val} )`);
        },
    },
}).mount("#vue-content");

let nav = createApp({
    data() {
        return {
        };
    },
    methods: {
        showDefault: function () {
            console.log("showDefault()");
            defaultApp.$data.isShow = true;
            bootstrapApp.$data.isShow = false;
            vueApp.$data.isShow = false;
        },
        showBootstrap: function () {
            console.log("showBootstrap()");
            defaultApp.$data.isShow = false;
            bootstrapApp.$data.isShow = true;
            vueApp.$data.isShow = false;
        },
        showVue: function () {
            console.log("showVue()");
            defaultApp.$data.isShow = false;
            bootstrapApp.$data.isShow = false;
            vueApp.$data.isShow = true;
        },
    },
}).mount("#navbar");
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<nav id="navbar" class="navbar navbar-dark navbar-expand-lg bg-dark">
  <div class="container-fluid">
    <a @click.prevent="showDefault" class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a @click.prevent="showBootstrap" class="nav-link" href="#">Bootstrap</a>
      </li>
      <li class="nav-item">
        <a @click.prevent="showVue" class="nav-link" href="#">Vue.js</a>
      </li>
    </ul>
  </div>
</nav>
<div id="default-content">
  <p v-show="isShow">default content</p>
</div>
<div id="bootstrap-content">
  <p v-show="isShow">bootstrap content</p>
</div>
<div id="vue-content">
  <p v-show="isShow">vue content</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
👤Jaromanda X

0👍

Is there a reason you’re using multiple apps?
You can easily solve this by using one app and storing the visibility states of those pages in there.

👤Figurys

-1👍

You are using the same "isShow" data property for all three instances (defaultApp, bootstrapApp, and vueApp). This means that when you update "isShow" in one app instance, it affects all three, which is why all content sections are always visible.

👤Wes

Leave a comment