如何在 Vue.js 中从 JSON 数据创建选择元素？

Question

I want to render a JSON into a select input with Vue.js, but I don't know how because the JSON is a bit complicated.

The JSON is:

{ 
   "08:00:00":"08:00:00 AM",
   "08:30:00":"08:30:00 AM",
   "09:00:00":"09:00:00 AM",
   "09:30:00":"09:30:00 AM",
   "10:00:00":"10:00:00 AM",
   "10:30:00":"10:30:00 AM",
   "11:00:00":"11:00:00 AM",
   "11:30:00":"11:30:00 AM"
}

As you can see, the JSON doesn't have a key to access into each element. This is the reason why I cannot render with the typical way. I'm implementing Vue.js in Laravel.

Answer 1

Make sure you have in your data() or computed part, the parsed JSON object. Then you do something like:

<template>
    <select>
      <option v-for="(value, key) in yourParsedJsonObject" :value="key">{{value}}</option>
    </select>
</template>

<script>
export default {
    data(){
        return {
           yourParsedJsonObject: JSON.parse(...yourjson...)
        }
    }
}
</script

Answer 2

You can use the optional index as second argument -syntax of the v-for directive:

<li v-for="(row, index) in json">
  {{ index }}: {{ row }}
</li>

Full source code: https://vuep.run/7d8683b3

Here an example with using select option elements:

<select v-model="selected">
  <option v-for="(row, index) in json">
    {{ index }}: {{ row }}
  </option>
</select>

Full source code: https://vuep.run/392a82b2