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

【问题标题】：How create a select element from JSON data in Vue.js?如何在 Vue.js 中从 JSON 数据创建选择元素？
【发布时间】：2020-03-24 06:23:01
【问题描述】：

我想用 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。

【问题讨论】：

假设您已经将该 JSON 解析为一个对象，您可以调用 Object.entries(obj) 来获取一个二维的键和值数组。
看来你确实有键，考虑到你的第一行"08:00:00":"08:00:00 AM"，键是"08:00:00"，值是"08:00:00 AM"
JSON 是一个字符串，你的意思是解析 JSON 的 JavaScript 对象吗？

标签： javascript arrays json laravel vue.js

【解决方案1】：

您可以使用v-for 指令的可选index as second argument -syntax：

<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

【讨论】：

你可能想要使用<option ... :value="{[index]:row}"> 来保持selected 一个对象而不是一个字符串；编辑：或key/value的任何其他合适的表示形式

【解决方案2】：

确保您的 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

【讨论】：