如何传递对象的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组件道具数组?的主要内容,如果未能解决你的问题,请参考以下文章

如何在vue中将不同值的数组作为道具传递

Vue.js - 如何将 prop 作为 json 数组传递并在子组件中正确使用?

如何评估 data 属性中的 Vue.js 组件道具?

Vue - 通过路由器将道具传递给组件

Vue:改变传递给组件的道具的正确方法?

如何在 Vue.js 中将实例化的 Vue 组件作为道具传递?