CODEWITHSUNDEEP
javascriptvue.jsvue-component
Bitwise
Bitwise

Reputation: 8461

Adding properties to a vue component

I'm trying to create a "Dropdown List" component. This component should take in a title and a route. I'm having trouble setting up the javascript for this component within the parent. Here is what I'm working with.

PARENT COMPONENT:

<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>

USER DROPDOWN LIST

<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>

ERRORS:

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"

Anyone understand what I am doing wrong?

Upvotes: 0

Views: 571

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

you didn't pass item as a props to UserDropdownList

first, pass item as a prop to UserDropdownList

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

then, setup UserDropdownList to receive item prop

export default {
    props: ['item']
}

Upvotes: 1

Related Questions