Quiero hacer un componente, seleccionar el componente y hacerlo lo más reutilizable posible.
Agregué la opción de accesorios que pasan una matriz de objetos y puedo recuperar los datos, pero el problema está en el resultado.
Quiero agregar accesorios que pasen la clave del objeto (conviértalo en una variable, de modo que si uso otra matriz de objetos que no tiene la misma clave, todavía funciona) que quiero mostrar en el componente de selección, por ejemplo:
user : [ { name : "Jo", contact : "021" }, { name : "Bo", contact : "022" } ]y puede elegir mostrar el nombre o el contacto, pero no funciona, aquí está mi código, ¿puede ayudarme, por favor?
aquí está el archivo del componente
<template> <div> <div>Selected : </div> <select class="form-select"> <option v-for="(option,i) in options" :key="i"> {{ option.variable }} </option> </select> </div> </template>el script del componente
<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>y aquí es donde lo llamo
<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 corchetes en lugar de notación de puntos option[variable] u 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>Para acceder a un objeto dinámicamente, debe usar la notación de corchetes: myObject[myDynamicKey] . De lo contrario, intentará acceder a una clave llamada variable en su objeto, que no existe.
Cuando pasa su variable prop, usa el enlace dinámico :variable="nom" que intenta acceder a una variable llamada nom . Supongo que no existe, debe usar un enlace simple (es decir, sin los dos puntos dobles : para pasar un valor de cadena)
<!-- 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>