I want to make a component, select component, and make it as reusable as possible.

I added the props option that pass an array of object and I can retrieve the data, but the problem is in the result.

I want to add a props that pass the key of the object (make it a variable so if I use another array of object that has not the same key it still work) that I want to show in the select component for example:

user : [
    {
      name : "Jo",
      contact : "021"
    },
    {
      name : "Bo",
      contact : "022"
    }
]

and you can choose to show either the name or the contact but it doesn't work , here is my code , can you help me please ?

here is the component file

<template>
<div>
<div>Selected : </div>
    <select >
        <option v-for="(option,i) in options" :key="i">
            {{ option.variable }}
        </option>
    </select>
  </div>
 </template>

the script of the component

<script>
export default {
props: {
    label : {
        type : String,
        default : "",
    },
    options : {
        type : Array,
        default : () => [],
    },
    variable : {
        type : String,
        default : "",
    },
    selected : {
        type : Object,
        default : {}
    }
},
data () {
    return{
        vari : this.variable //here i tried to get the props and use it at the top but same 
 result
    }
   }
  }
 </script>

and here is where i call it

<template>
<div >
<div >
    <div >
        <h2 >Transaction</h2>
        <div>
            <base-select :options="proprietaires" :variable="nom"></base-select>
        </div>
    </div>
</div>

CodePudding user response：

Use bracket instead dot notation option[variable] or option[vari]:

Vue.component('baseSelect', {
  template: `
    <div>
      <div>Selected : </div>
      <select >
          <option v-for="(option,i) in options" :key="i">
              {{ option[variable] }}
          </option>
      </select>
    </div>
  `,
  props: {
    label : {
        type : String,
        default : "",
    },
    options : {
        type : Array,
        default : () => [],
    },
    variable : {
        type : String,
        default : "",
    },
    selected : {
        type : Object,
        default : () => {}
    }
  },
  data () {
    return{
      vari : this.variable 
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      proprietaires: [{name : "Jo", contact : "021"}, {name : "Bo", contact : "022"}],
      nom: 'name'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div >
  <div >
    <div >
      <h2 >Transaction</h2>
      <div>
        <base-select :options="proprietaires" :variable="nom"></base-select>
      </div>
    </div>
  </div>
</div>
</div>

CodePudding user response：

1. To access an object dynamically, you have to use the brackets notation: myObject[myDynamicKey]. Otherwise you'll try to access a key called variable in your object, which doesn't exists.

2. When you pass your variable prop, you use dynamic binding :variable="nom" which tries to access a variable called nom. I guess it doesn't exists, you should use simple binding (i.e. without the double colon : to pass in a string value)

<!-- BaseSelect.vue uses dynamic key `variable` -->
<option v-for="(option,i) in options" :key="i">
   {{ option[variable] }}
</option>

<!-- String binding -->
<base-select :options="proprietaires" variable="name"></base-select>

// or
<template>
  <!-- Variable binding -->
  <base-select :options="proprietaires" :variable="nom"></base-select>
</template>

<script>
export default {
  data () {
    return {
      nom: 'name',
    }
  }
}
</script>