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

Question

我想使用 Vue.js 将 JSON 渲染到选择输入中，但我不知道如何，因为 JSON 有点复杂。

JSON是：

{ 
   "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"
}

如您所见，JSON 没有访问每个元素的密钥。 这就是我不能用典型方式渲染的原因。 我在 Laravel 中实现 Vue.js。

Answer 1

确保在data()或computed部分中有解析的 JSON 对象。 然后你做类似的事情：

<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

您可以使用可选索引作为v-for指令的第二个参数 - 语法：

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

完整源代码： https ://vuep.run/7d8683b3

这是使用选择选项元素的示例：

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

完整源代码： https ://vuep.run/392a82b2