Div container wont disapperar. Why is the conditional rendering not workin?-CodePudding

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Intro Into Vue3</title>
  <style>
    .box {
      background-color: purple;
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>
  <div id="app">
    {{greeting}}
    <input v-model="greeting" />
  </div>

  <hr />
  <div  v-if="isVisible"></div>
  <hr>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let app = Vue.createApp({
      data: function () {
        return {
          greeting: "Hello Vude3",
          isVisible: false,
        };
      },
    });
    app.mount("#app");
  </script>
</body>

</html>

I am working on the tutorial of freecodecamp on yt regarding vu3 at the beginning conditional rendering is explained in the data properties there is an variable "isVisible" set to false the v-if is not working on the purple box though its set to false

CodePudding user response：

Move your box inside div id="app":

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Intro Into Vue3</title>
  <style>
    .box {
      background-color: purple;
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>
  <div id="app">
    {{greeting}}
    <input v-model="greeting" />
    <button @click="isVisible=!isVisible">toggle box</button>
    <div  v-if="isVisible"></div>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let app = Vue.createApp({
      data: function () {
        return {
          greeting: "Hello Vude3",
          isVisible: false,
        };
      },
    });
    app.mount("#app");
  </script>
</body>

</html>

CodePudding user response：

Your problem is here:

<div id="app">
    {{greeting}}
    <input v-model="greeting" />
</div>

Since you mount vue on the app, id app.mount("#app");, Vue.js will only control the components within the div that declares this id, and your box-class div isn't within this div and so is not controlled by vue.

so change:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Intro Into Vue3</title>
  <style>
    .box {
      background-color: purple;
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>
  <div id="app">
    {{greeting}}
    <input v-model="greeting" />
  <hr />
  <div  v-if="isVisible"></div>
  <hr>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let app = Vue.createApp({
      data: function () {
        return {
          greeting: "Hello Vude3",
          isVisible: true,
        };
      },
    });
    app.mount("#app");
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Intro Into Vue3</title>
  <style>
    .box {
      background-color: purple;
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>
  <div id="app">
    {{greeting}}
    <input v-model="greeting" />
  <hr />
  <div  v-if="isVisible"></div>
  <hr>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let app = Vue.createApp({
      data: function () {
        return {
          greeting: "Hello Vude3",
          isVisible: true,
        };
      },
    });
    app.mount("#app");
  </script>
</body>
</html>

and it will work