0
316
VistasNo puedo mostrar json con la opción de selección (Laravel Vue)
Quiero mostrar el valor en Opciones con id_provincia y provincia. pero en las opciones siempre aparece en formato JSON. por favor ayúdame estoy atascado
este es mi create.js
changeShippingCountry(country) { this.$set(this.form.shipping, 'country', country); this.fetchStates(country, (states) => { this.$set(this.states, 'shipping', states); this.$set(this.form.shipping, 'state', ''); }); }, fetchStates(country, callback) { $.ajax({ method: 'GET', url: route('provinces'), dataType: "json", }).then(callback); },y este billing_detail.blade.php
<input type="text" name="billing[state]" :value="form.billing.state" id="billing-state" class="form-control" v-if="! hasBillingStates" @change="changeBillingState($event.target.value)" > <select name="billing[state]" v-model="form.billing.state" id="billing-state" class="form-control arrow-black" v-else > <option value="">{{ trans('storefront::checkout.please_select') }}</option> <option v-for="(name, code) in states.billing" :value="code" v-text="name" > </option> </select>esto es resultado en opciones
1 Respuestas
Responde la pregunta0
No puedo ver cómo se proporcionan sus datos de back-end en PHP, pero asumo aquí que states.billing es una matriz de objetos, cada objeto con los elementos province province_id él.
En la documentación de vue , puede leer que los segundos argumentos que coloca entre paréntesis al frente de un bucle v-for difieren, dependiendo de si su v-for se desplaza sobre una matriz o un objeto.
Si es una matriz , la documentación dice:
v-for también admite un segundo argumento opcional para el índice del elemento actual.
Si es un objeto , la documentación dice:
También puede proporcionar un segundo argumento para el nombre de la propiedad (también conocido como clave)
Teniendo en cuenta que está recorriendo una matriz (de objetos), probablemente debería actualizar su bucle v-for a algo como esto:
<option v-for="(item, index) in states.billing" :value="item.province_id" :key="index" > {{ item.province }} </option>Tenga en cuenta que estoy usando el índice para el atributo clave aquí. Si su id_provincia es único, también puede hacer lo siguiente:
<option v-for="item in states.billing" :value="item.province_id" :key="item.province_id" > {{ item.province }} </option>