CODEWITHSUNDEEP
javascriptvue.js
Olivander12
Olivander12

Reputation: 35

Vue.js Tutorials: Conditonals in Vue.js not working - Property or method is not defined

I am trying to follow this tutorial and copied the code. The only thing I changed is the location of index.js, what should not be the issue, as the hello world tutorial worked fine. The consoles outputs the following:

[Vue warn]: Property or method "seen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in <Root>)

So my questions if, if there is anything wrong with this code from the index.js file:

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

or is there something wrong with the html file (inserted into a markdown file, thus the title part)

---
title: vue
---
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>

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

        <script src="vue/index.js"></script>
    </body>
</html>

It is probably a simple mistake, but I have been fiddling around for two hours. It would be great if someone could help me out.

Upvotes: 0

Views: 619

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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.

Upvotes: 1

zerbene
zerbene

Reputation: 1502

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>

Upvotes: 2

Related Questions