向 vue 组件添加属性答案

【问题标题】：Adding properties to a vue component向 vue 组件添加属性
【发布时间】：2018-10-01 07:49:45
【问题描述】：

我正在尝试创建一个“下拉列表”组件。这个组件应该有一个标题和一个路由。我在父级中为此组件设置 javascript 时遇到问题。这是我正在使用的。

父组件：

<template>
  <UserDropdownList v-for="item in items"></UserDropdownList>
</template>


<script>
  import SignUp from "../forms/SignUp";
  import SignIn from "../forms/SignIn";
  import UserDropdownList from "./UserDropdownList";
  import { mixin as clickaway } from 'vue-clickaway';
  export default {
    mixins: [ clickaway ],
    components: {
      SignUp,
      SignIn,
      UserDropdownList
    },
    data: function () {
      return {
        items: [
          { title: 'Profile', route: "/profile" },
          { title: 'Users', route: "/users" }
        ]
      }
    },
    computed: {
      isLoggedIn () {
        return this.$store.getters.isLoggedIn
      },
      userName () {
        return this.$store.getters.currentUser.userName
      },
      isDropdownOpen () {
        return this.$store.getters.dropdownIsOpen
      }
    },
    methods: {
      signOut: function(event) {
        this.$store.commit("CLOSE_DROPDOWN");
        this.$store.commit("LOGOUT");
        this.$router.push('/');
      },
      openDropdown: function() {
        if (event.target.id != "button") {
          this.$store.commit("OPEN_DROPDOWN");
        }
      },
      closeDropdown: function() {
        this.$store.commit("CLOSE_DROPDOWN");
      }
    }
  }
</script>

用户下拉列表

<template>
  <li v-on:click="closeDropdown"><router-link to={{ item.route }} id="button">{{ item.title }}</router-link></li>
</template>

<script>
  export default {
  }
</script>

<style>
</style>

错误：

Property or method "item" 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.

Error in render: "TypeError: Cannot read property 'title' of undefined"

有人明白我做错了什么吗？

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

你没有将item 作为道具传递给UserDropdownList

首先，将项目作为道具传递给UserDropdownList

<template>
  <UserDropdownList v-for="item in items" v-bind:item="item"></UserDropdownList>
</template>

然后，设置UserDropdownList 接收道具道具

export default {
    props: ['item']
}

【讨论】：