vue не запущенная переменная, сохраненная в экземпляре

Question

Я новичок в Vue js, работаю с примерами в документации по Codesandbox.Этот код показывает мне ошибку

[Vue warn]: Property or method "todos" 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.

Я не смог определить, где именно проблема.

<template>
  <div id="app">
    <ol>
      <li v-bind:key="todo.text" v-for="todo in todos">{{ todo.text }}</li>
    </ol>
  </div>
</template>

<script>
import Vue from "vue";

var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" }
    ]
  }
});
</script>

<style>
style here
</style>

Вот пример кода ипроблема

Answer 1

Вот обновленный код.Объявленная вами переменная todos не относится к экземпляру vue.

Вы должны объявить свойство данных, как показано ниже.

    <template>
  <div id="app">
    <ol>
      <li v-bind:key="todo.text" v-for="todo in todos">{{ todo.text }}</li>
    </ol>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      todos: [
        { text: "Learn JavaScript" },
        { text: "Learn Vue" },
        { text: "Build something awesome" }
      ]
    };
  }
};

https://codesandbox.io/s/9o2036km1r