CODEWITHSUNDEEP
vue.jsvuejs2
mark5
mark5

Reputation: 563

Reusable Vue component props passing

I'm trying to reuse the searchselect multiple times in the same vue file:

<SearchSelect :options="item in brandList"></SearchSelect>

<SearchSelect :options="item in modelTypes"></SearchSelect>



brandList: [
    { value: "A", text: "A" },
    { value: "B", text: "B" },
    { value: "C", text: "C" },
    { value: "D", text: "D" }
  ],

In my searchselect.vue i'm writing as:

<template>
  <div>
    <!-- object value -->
    <model-select
      :options="options"
      v-model="item"
      placeholder="select item"
    ></model-select>
  </div>
</template>



export default {
   props: ["itemOption"],
   data() {
      return {
        options: [],
     item: {
       value: "",
       text: ""
     }
   };
},

Can someone guide me what i did wrong on passing values from my vue.file data?

Upvotes: 1

Views: 558

Answers (1)

Daniel Orme&#241;o
Daniel Orme&#241;o

Reputation: 2778

From a first glance, it looks like you are using the wrong name for your prop.

In SearchSelect, define the prop as follows.

export default {
    props: {
       options: Array
    },
    data: () => ({
        item: { value: '', text: '' }
    }),
}

The name of the prop is what you'll use to bind brandList and modelTypes to the component when you call it as:

<SearchSelect :options="item in brandList"></SearchSelect>

Note that options matches the name of the prop in the component above

Upvotes: 2

Related Questions