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

Posted 2023-02-22

【中文标题】如何在 Vue.js 中从 JSON 数据创建选择元素？

【英文标题】：How create a select element from JSON data in Vue.js?

【发布时间】：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 对象吗？

【参考方案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