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

Question

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.

please provide part that raises this issue

Boussadjra Brahim
– Boussadjra Brahim

2020-12-02 18:58:37 +00:00
Commented Dec 2, 2020 at 18:58 — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 2, 2020 at 18:58

zerbene · Accepted Answer · 2020-12-02 19:14:55Z

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>

answered Dec 2, 2020 at 19:14

zerbene

1,5122 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olivander12 Over a year ago

--- title: vue --- <html>     <head>       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     </head>      <template>       <div id="app">         <span v-if="seen">Now you see me</span>       </div>     </template>      <script type="text/javascript">     export default {       name: "App",       data() {         return {           seen: true,         };       },     };     </script>      <style>     </style>  </html>

This code produces the error vue:143 Uncaught SyntaxError: Unexpected token 'export'.

Boussadjra Brahim · Accepted Answer · 2020-12-02 19:36:00Z

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.

answered Dec 2, 2020 at 19:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

6 Comments

Olivander12 Over a year ago

Your example works, but it still does not work with an external js file. I copied new Vue({ el: "#app", data() { return { seen: true, }; }, }); into index.js, which still outputs the above mentioned error

Boussadjra Brahim Over a year ago

try out <script src="./vue/index.js"></script> or <script src="/vue/index.js"></script>

Olivander12 Over a year ago

The path is right I guess. Otherwise the console outputs GET http://localhost/vue/index.js net::ERR_ABORTED 404 (Not Found)

Olivander12 Over a year ago

It finally worked. I dont know why, but my browser did not load the latest index.js file. The web inspector was still showing my old "hello world" example. I changed the browser and the recent index.js file loaded! Thanks!

Boussadjra Brahim Over a year ago

you're welcome, which browsers did you used?

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related