Estoy trabajando con BootstrapVue . Tengo el siguiente problema: tengo un menú desplegable de selección en mi parent.vue donde selecciono mi ID (como puede ver, son mis accesorios) y quiero comparar esto con mi archivo json ...
Ahora necesito hacer lo siguiente:
Articel en mi selección desplegableRank del artículo seleccionado de vuelta al padreNo tengo ni idea de cómo resolver eso con un archivo JSON anidado. Creo que tengo que usar un bucle v-for.
¡Gracias de antemano por ayudarme!
mi código:
<template> <b-card> <div class="mt-2">CLOTHING ITEM</div> <b-form-select type="text"></b-form-select> </b-card> </template> <script> import json from './json/ID.json' export default { name: "customerChoice", data() { return { json: json, } }, props: ["ID"] } </script>mi json anidado:
[ { "ID": "1111", "Product": { "1": { "Articel": "Jeans", "Rank": "1" }, "2": { "Articel": "T-Shirt", "Rank": "2" } } }, { "ID": "2222", "Product": { "1": { "Articel": "Hoodie", "Rank": "2" }, "2": { "Articel": "Jeans", "Rank": "" } } }, { "ID": "3333", "Product": { "1": { "Articel": "Socks", "Rank": "1" } } } ]Si te entiendo correctamente, echa un vistazo al siguiente fragmento:
Vue.component('Child', { template: ` <b-card> <div class="mt-2">CLOTHING ITEM</div> <b-form-select type="text" v-model="selected" :options="articles" text-field="Articel" value-field="Rank" > </b-form-select> </b-card> `, data() { return { json: [ {ID: "1111", "Product": {"1": {"Rank": "1", "Articel": "Jeans"}, "2": {"Articel": "T-Shirt", "Rank": "2"}}}, {ID: "2222", "Product": {"1": {"Articel": "Hoodie","Rank": "2"}, "2": {"Articel": "Jeans", "Rank": ""}}}, {ID: "3333", "Product": {"1": {"Articel": "Socks", "Rank": "1"}}} ], selected: null, } }, props: ["id"], computed: { articles() { const res = [] const art = this.json.find(j => j.ID === this.id) for(let key in art.Product) { res.push(art.Product[key]) } return res } }, watch: { selected() { this.$emit('changed', this.selected) } } }) new Vue({ el: '#demo', data() { return { parentId: '1111', rank: '' } }, methods: { rankReceived(val) { console.log(val) this.rank = val } } }) <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <div id="demo"> <h3>{{rank}}</h3> <Child :id="parentId" @changed="rankReceived" /> </div>