javascript - 如何在 Vue.js 中从 JSON 数据创建 select 元素？

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 没有访问每个元素的 key 。这就是我无法用典型方式渲染的原因。我正在 Laravel 中实现 Vue.js。

Answer 1

确保您的 data() 或 compulated 部分中有已解析的 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