如何使用嵌套对象填充 Vue 下拉列表答案

【问题标题】：How to populated Vue drop down with nested objects如何使用嵌套对象填充 Vue 下拉列表
【发布时间】：2021-06-11 09:12:39
【问题描述】：

我有这个 json 响应并想用下拉 Vue 填充“名称”

{
    "code": 200,
    "message": "OK",
    "payload": [
        "grade",
        [
            {
                "id": 1,
                "name": "B",
                "desc": "test test test"
            }
            {
                "id": 2,
                "name": "B",
                "desc": "test test test"
            }
           
        ]
    ]
}

【问题讨论】：

到目前为止你尝试过什么？你遇到了什么困难？没有人会为你写完整的代码

标签： laravel vue.js vue-component vue-router

【解决方案1】：

你想实现这样的目标吗？

如果您使用v-for 并在选择选项中动态填充值，则可以这样做。因此，无论您的有效负载是什么样的，您都可以将内容放在下拉列表中。

Vue.createApp({
  data() {
    return {
     selectedName: '',
     payload: [
        [
         {
           "id": 1,
           "name": "John Doe"
         },
         {
            "id": 2,
            "name": "Elvis Presley"
         }  
      ]
    ]
  }
 }
}).mount('#select-name')

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

<script src="https://unpkg.com/vue@next"></script>

<div id="select-name" class="demo">
  <select v-model="selectedName">
    <option value="" disabled hidden>select a name</option>
    <option v-for="user in payload[0]" :value="user.name">
      {{ user.name }}
    </option>
  </select>
  <br>
  <span>name: {{ selectedName }}</span>
</div>

查看official example 以了解那里发生的情况。

【讨论】：