[Vuejs]-I can't display json with select option (Laravel Vue)

0👍

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>

Leave a comment