如何传递对象的vue组件道具数组?
Posted
技术标签:
【中文标题】如何传递对象的vue组件道具数组?【英文标题】:How to pass vue component props array of object? 【发布时间】:2021-01-14 18:47:00 【问题描述】:我的组件中有一个下拉列表,这是一个来自后面的 json 文件:
items:[
name:"label",
value:"",
options:[
]
,
name:"hint_text",
value:"",
options:[
]
,
name:"icon",
value:"",
options:[
]
,
name:"selectableOptions",
value:[
id:"1",
text:"item1",
,
id:"2",
text:"item2",
image_url:null
,
id:"3",
text:"item3",
image_url:null
,
id:"4",
text:"item4",
image_url:null
,
id:"5",
text:"item5",
image_url:null
,
]
]
这就是我的组件的样子:
<template>
<div class="dropdown">
<div class="field">
<v-select
label="Label" // label must be eqau to items[0].name
hint="hint"//hint must be equal items[1].name
persistent-hint
background-color=""
:items="['item1', 'item2', 'item3']"// must be equal to items[3].value.text
outlined
>
<span
class=""
style="font-size:16px; color:#000000;"
slot="prepend-inner"
>icon</span>// must be equal to item[2].name
</v-select>
</div>
<script>
export default
props:
items:
type: Object;
,
;
</script>
我收到一个错误,即 items 不是 Object 并且它是一个数组,但是如果我更改为数组仍然不起作用。你能帮我吗,如何正确传递我在 cmets 部分中写的项目元素?
【问题讨论】:
【参考方案1】:您的 JSON 不完全正确,模板代码有问题,但我希望这只是拼写错误。
您只需设置正确的道具类型(应该是数组),您就可以通过这种方式传递道具数组:
...
<div class="dropdown">
<div>
<v-select
:label="items[0].name"
:hint="items[1].name"
persistent-hint
background-color=""
:items="items[3].value"
item-value="id"
item-text="text"
outlined
>
<span
class=""
style="font-size:16px; color:#000000;"
slot="prepend-inner"
> items[2].name </span>
</v-select>
</div>
</div>
...
<script>
export default
props:
items:
type: Array
</script>
【讨论】:
如果我想添加v-model我应该根据json文件传递什么? @AtousaDehsarvi 这取决于你的目标。我想,您需要存储项目的 id (items[3].value.id),因为它现在由 item-value 属性声明。如果您需要存储整个对象而不是其 id,您可以删除item-value=...
并添加 return-object
prop以上是关于如何传递对象的vue组件道具数组?的主要内容,如果未能解决你的问题,请参考以下文章