json - 如何传递对象的vue组件道具数组?
问题描述
我的组件中有一个下拉列表,这是一个来自后面的 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 并且它是一个数组,但是如果我更改为数组仍然不起作用。你能帮我吗,如何正确传递我在评论部分写的项目元素?
解决方案
您的 JSON 不完全正确,模板代码有问题,但我希望这只是拼写错误。
您只需设置正确的道具类型(它应该是Array),您就可以通过这种方式传递道具数组:
...
<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>