0
311
ViewsI can't display json with select option (Laravel Vue)
I want to display the value in Options with province_id and province. but in the options it always appears in JSON format. please help me i'm stuck
this my 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);
},
and this 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>
this is result in options
1 answers
Answer question0
I can't see how your backend data is provided in PHP, but I'm making the assumption here that states.billing is an array of objects, each object with the elements province_id and province in it.
In the vue documentation, you can read that the 2nd arguments you put in between brackets at the front of a v-for loop differ, depending on whether your v-for loops over an array or an object.
If it is an array, the documentation reads:
v-for also supports an optional second argument for the index of the current item.
If it is an object, the documentation reads:
You can also provide a second argument for the property’s name (a.k.a. key)
Considering that you are looping over an array (of objects), you should probably update your v-for loop to something like this:
<option
v-for="(item, index) in states.billing"
:value="item.province_id"
:key="index"
>
{{ item.province }}
</option>
Note that I'm using the index for the key attribute here. If your province_id is unique, you can also do the following:
<option
v-for="item in states.billing"
:value="item.province_id"
:key="item.province_id"
>
{{ item.province }}
</option>