如何在 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