Vue.js учебники: Conditonals in Vue.js не работает-свойство или метод не определены


Vue.js учебники: Conditonals in Vue.js не работает-свойство или метод не определены

02.12.2020 09:57:34 Просмотров 60 Источник

Я пытаюсь следовать этому учебнику и скопировал код. Единственное, что я изменил, - это расположение index.js, что не должно быть проблемой, так как учебник hello world работал нормально. Консоли выводят следующее:

[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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in <Root>)

Поэтому мои вопросы, если, если есть что-то не так с этим кодом от index.js файл:

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

или что-то не так с html-файлом (вставляется в файл markdown, таким образом, титульная часть)

---
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>

Это, вероятно, простая ошибка,но я уже два часа возился. Было бы здорово, если бы кто-нибудь мог мне помочь.

У вопроса есть решение - Посмотреть?

Ответы - Vue.js учебники: Conditonals in Vue.js не работает-свойство или метод не определены / Vue.js Tutorials: Conditonals in Vue.js not working - Property or method is not defined

zerbene

02.12.2020 10:14:55

Во-первых, мы пишем data не так, а так, data(){return { seen:true };}

И этот код работает:

<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>

Что-то классное в Vuejs заключается в том, что HTML JS и CSS часть находятся на одной странице. А что касается HTML-части, то это просто <template>, а внутри добавьте сразу <div> без <body>

Является ответом!
Boussadjra Brahim

02.12.2020 10:36:00

Если вы используете CDN, ваш код должен быть таким :

<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>

вы определяете данные как функцию, которая возвращает объект.

Помочь в развитии проекта:
Закрыть X