Tengo un b-dropdown en mi parent.vue donde selecciono un item y envío Props (por ejemplo, 1111, 2222, etc.) a mi child.vue.
Ahora necesito verificar, por ejemplo, si mi valor de accesorios es 1111 , cuántas rows (mi definición de filas en este caso es 0 y 1, por lo que dos filas ) hay en este objeto JSON y luego activar mi click-event basado en este conteo para agregar la cantidad de elementos a mi plantilla.
Mi pregunta es si esto es posible y si es así, ¿cómo hacerlo?
¡Gracias!
en mi plantilla de child.vue:
<div class="mt-2"> <b-button @click="addElement" variant="block">Add element</b-button> </div>mi guion:
import json from './json/json.json' data() { return { inputs: [{}] json: json, } } methods: { addElement() { this.inputs.push({}); }, } props: ["item"]mi JSON:
[ { "1111": { "0": { "Number": 1234 }, "1": { "Number": 4321 } } }, { "2222": { "0": { "Number": 6789 }, "1": { "Number": 9876 } } } ]Puede obtener el tamaño del objeto por Object.keys({"0": {"Number": 1234}, "1": "x"}).length .
Aplicado a su código:
addElement() { if(this.item === '1111'){ for(let key in this.json[0]['1111']) this.inputs.push({}); } //or this.addSomething(Object.keys( this.json[0]['1111'] ).length) } },Puede probar con for (variable in object) {statement} y gancho mounted :
Vue.component('Child', { template: ` <div class="mt-2"> <h3>child</h3> <p>{{ inputs }}</p> </div> `, props: ["item"], data() { return { inputs: [], } }, methods: { addElement(el) { for(let key in el) { this.inputs.push(el[key]) } } }, mounted() { this.addElement(this.item) } }) new Vue({ el: '#demo', data() { return { json : [ {"1111": {"0": {"Number": 1234}, "1": {"Number": 4321}}}, {"2222": {"0": {"Number": 6789}, "1": {"Number": 9876}}} ] } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <Child :item="json[0]['1111']" /> </div>