Question

我正在尝试编写Todo应用程序作为我的第一个Vue项目。似乎没有在TodoItem标签中的h3组件中显示我的商品。

我已经仔细检查了所有内容，但看不到任何错误。为什么我的物品没有出现？

App.vue：

<template>
  <div id="app">
    <Todos v-bind:todos="todos" message="Here are your daily tasks"/>
  </div>
</template>

<script>
import Todos from './components/Todos.vue'

export default {
  name: 'app',
  components: {
    Todos
  },
  data: {

    todos: [
      {
        id: 1, 
        title: "Todo one",
        completed: false,
      },
      {
        id: 2, 
        title: "Todo two",
        completed: false,
      },
      {
        id: 3, 
        title: "Todo three",
        completed: true,
      }
    ]

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Todos：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <div v-bind:key="todo.id" v-for="todo in todos">
      <TodoItem v-bind:todo="todo" />
      </div>
  </div>
</template>

<script>

import TodoItem from '../components/TodoItem.vue'

export default {
  name: "Landing",
  components: {
    TodoItem
  },
  props: ["message", "todos"],
  data: {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

TodoItem：

<template>
  <div class="todo-item">
      <h3>ITEM: test</h3>
  </div>
</template>

<script>

export default {
  name: "TodoItem",
  props: ["todo"],
  data: {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Answer 1

data must be a function用于组件。如果进行以下更改，您的代码将呈现项目：

export default {
  name: 'App',
  components: {
    Todos,
  },
  data() {
    return {
      todos: [
        {
          id: 1,
          title: 'Todo one',
          completed: false,
        },
        {
          id: 2,
          title: 'Todo two',
          completed: false,
        },
        {
          id: 3,
          title: 'Todo three',
          completed: true,
        },
      ],
    };
  },
};

我高度建议将eslint和eslint-plugin-vue集成到您的编辑器中，以避免出现此类常见错误。

Answer 2

如前所述，Vue组件中的data必须是一个函数。

这是一个可以帮助您的工作版本： https://codesandbox.io/s/vue-template-ds5up?fontsize=14

Vue道具项目似乎是空的？

2 个答案: