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

Question

我有这个 json 响应并想用下拉 Vue

填充“名称”

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

Answer 1

你想实现这样的目标吗？

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

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 以了解那里发生的事情。

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

How to populated Vue drop down with nested objects

laravel

vue.js

vue-router

vue-component