Javascript 在 PrimeVue 中将对象渲染为 Dropdown

发布于07月29日

我正在使用以下脚本使用PrimeVue呈现一个DropDown:

<template lang="pug">
Dropdown#tag(v-model="tag" :options="tags")
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'

const tag = ref()
const tags = ref([])

onMounted(() => {
  tags.value = []

  Promise.all([
    axios.get('/api/v1/tags')
// ... some more requests here
  ]).then(([respTags]) => {
    tags.value = respTags.data
  }).catch($error => {
    toast.add({ severity: 'error', detail: $error, life: 3000 });
  }).finally(() => {
    isLoading.value = false
  })
})

</script>

我的问题是，respTags是一个与{tag1: {version: "1.2.3"}, tag2: {version: "1.2.4"}}类似的对象，当我将其传递给DropDown时，它显示为[Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got Object.

我的目标是将对象(tag1,tag2...)的键用作值，将version用作标签.

我知道我可以使用for循环来做这件事，但是有没有可能阻止实现一个单独的循环来做这件事呢？

const objectFromApiResult = respTags.data // {tag1: {version: "1.2.3"}, tag2: {version: "1.2.4"}} tags.value = Object.keys(objectFromApiResult).map((key) => ({ value: key, label: objectFromApiResult[key].version })) // [{label: "1.2.3", value: "tag1"}, {label: "1.2.4", value: "tag2"}]

const objectFromApiResult = respTags.data // {tag1: {version: "1.2.3"}, tag2: {version: "1.2.4"}} tags.value = Object.keys(objectFromApiResult).map((key) => ({ version: objectFromApiResult[key].version, name: `Version: ${objectFromApiResult[key].version}, TagKey: ${key}` })) // [{version: "1.2.3", name: "Version: 1.2.3, TagKey: tag1"}, {version: "1.2.4", name: "Version: 1.2.4, TagKey: tag2"}]

const objectFromApiResult = respTags.data // {tag1: {version: "1.2.3"}, tag2: {version: "1.2.4"}} tags.value = Object.keys(objectFromApiResult).map((key) => ({ version: objectFromApiResult[key].version, })) // [{version: "1.2.3"}, {version: "1.2.4"}]

Javascript 在 PrimeVue 中将对象渲染为 Dropdown

推荐答案

使用数组而不是对象

如何设置标签和值属性的名称

从同一属性中提取标签和值

如果我们只想将对象的值转换为数组

Javascript相关问答推荐

ReactJS中的material UI自动完成类别

Google图表时间轴—更改hAxis文本 colored颜色

JQuery. show()工作，但. hide()不工作

Angular material 拖放堆叠的牌副，悬停时自动展开&

为什么当我解析一个promise时，输出处于挂起状态？

加载背景图像时同步旋转不显示的问题

为什么useState触发具有相同值的呈现

React.Development.js和未捕获的ReferenceError：未定义useState

查询参数中的JAVASCRIPT/REACT中的括号

面对代码中的错误作为前端与后端的集成

我想将Sitecore搜索面过滤器从多个转换为单个

如果没有页面重新加载Angular ，innerHTML属性绑定不会更新

为什么在函数中添加粒子的速率大于删除粒子的速率？

无法读取未定义的属性(正在读取合并)-react RTK

背景动画让网站摇摇欲坠

如何在FiRestore中的事务中使用getCountFromServer

在JavaScript中，有没有一种方法可以迭代字符串的词法标记？

对不同目录中的Angular material 表列进行排序

如何从图表中映射一组图表-js使用REACT

如何使用Angular JS双击按钮