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

Posted 2023-02-23

【中文标题】如何使用嵌套对象填充 Vue 下拉列表

【英文标题】：How to populated Vue drop down with nested objects

【发布时间】：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"
            
           
        ]
    ]

【问题讨论】：

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

【参考方案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 以了解那里发生的情况。