Vue.js Учебные пособия: Условия в Vue.js не работает - свойство или метод не определены

#javascript #vue.js

Вопрос:

Я пытаюсь следовать этому руководству и скопировал код. Единственное, что я изменил, это расположение 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://v2.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>

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

Ответ №1:

Во-первых, мы пишем не 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>

1. --- 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> Этот код выдает ошибку vue:143 Uncaught SyntaxError: неожиданный токен ‘export’.

Ответ №2:

Если вы используете 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>

Развернуть фрагмент кода

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

1. Ваш пример работает, но он по-прежнему не работает с внешним js-файлом. Я скопировал new Vue({ el: "#app", data() { return { seen: true, }; }, }); в index.js , который по-прежнему выдает вышеупомянутую ошибку

2. попробуйте <script src="./vue/index.js"></script> или <script src="/vue/index.js"></script>

3. Я думаю, путь правильный. В противном случае консоль выводит GET http://localhost/vue/index.js net::ERR_ABORTED 404 (Not Found)

4. Наконец-то это сработало. Я не знаю почему, но мой браузер не загрузил последнюю версию index.js досье. Веб-инспектор все еще показывал мой старый пример «hello world». Я сменил браузер и недавний index.js файл загружен! Спасибо!

5. пожалуйста, какими браузерами вы пользовались?