[Vuejs]-Vue prop item seems to be empty?

0👍

data must be a function for a component. Your code renders the items if you make the following changes:

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,
        },
      ],
    };
  },
};

I highly recommend integrating eslint along with eslint-plugin-vue into your editor to avoid these kinds of common errors.

0👍

As previously stated, data in a Vue component must be a function.

Here’s a working version to help you out:
https://codesandbox.io/s/vue-template-ds5up?fontsize=14

Leave a comment