[Vuejs]-Vue.js Tutorials: Conditonals in Vue.js not working – Property or method is not defined

by

1👍

✅

If you’re using CDN your code should be like :

<html>

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
  <span v-if="seen">Now you see me</span>

</div>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data() {
      return {
        seen: true,
      };
    },
  });
</script>
<style>

</style>

</html>

you define data as a function that returns object.

👤Boussadjra Brahim

2👍

First, we don’t write data like this but like this data(){return { seen:true };}

And this code works:

<template>
  <div id="app">
    <span v-if="seen">Now you see me</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      seen: true,
    };
  },
};
</script>

<style>
</style>

Something cool with Vuejs is that HTML JS and CSS part is on the same page.
And for the HTML part, it’s just an <template> and inside add direct the <div> without <body>

👤zerbene

Leave a comment