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 class="form-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 class="container">
<div class="row mt-4">
<div class="col-md-6">
<h2 class="text-left">Transaction</h2>
<div>
<base-select :options="proprietaires" :variable="nom"></base-select>
</div>
</div>
</div>
Use bracket instead dot notation option[variable] or option[vari]:
Vue.component('baseSelect', {
template: `
<div>
<div>Selected : </div>
<select class="form-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 class="container">
<div class="row mt-4">
<div class="col-md-6">
<h2 class="text-left">Transaction</h2>
<div>
<base-select :options="proprietaires" :variable="nom"></base-select>
</div>
</div>
</div>
</div>
</div>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.
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>