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>

图标//必须等于项[2]。名称
导出默认值{
道具：{
项目：{
类型：对象；
},
};

---

我发现一个错误，items不是Object，它是一个数组，但是如果我改成数组仍然不起作用。你能帮助我，如何正确传递我在评论部分写的items元素吗？

你的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>

。。。
{{items[2].name}
...
导出默认值{
道具：{
项目：{
类型：数组
}
}
}

您的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>

。。。
{{items[2].name}
...
导出默认值{
道具：{
项目：{
类型：数组
}
}
}

如果我想添加v-model，根据json文件我应该传递什么？@AtousaDehsarvi这取决于你的目标。我想，你需要存储物品的id（物品[3].value.id），现在由item value prop声明。如果您需要存储整个对象而不是其id，您可以删除

item value=…

并添加

return object

propif如果我想添加v-model，根据json文件我应该向其传递什么？@AtousaDehsarvi这取决于您的目标。我想，您需要存储项的id（项[3]）.value.id）。如果需要存储整个对象而不是其id，可以删除

item value=…

并添加

return object

prop