'；[对象对象]'；在Vue.js数据列表中显示而不是标签

我正在使用

下拉菜单显示项目中的组名

<data-list
    ref="groupName"
    name="groupName"
    label="Groups: "
    :options="groupList"
></data-list>
.....
methods:{
    groupList(){
        return this.$store.getters['Groups/getGroups']
    }
}

---

这个bug似乎在您的

数据列表中。最有可能的情况是：

[
 {label: "test", value: 14},
 {label: "Test1", value: 16},
 {label: "Test2", value: 17},
 {label: "Test3", value: 18},
]

<!-- XXX: DON'T DO THIS -->
<option v-for="option in options" :value="option">{{option}}</option>


{{option}}


Vue.component（'data-list'）{
道具：[“标签”，“选项”]，
模板：`
{{label}}
{{option}}
`,
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
群组列表：[
{标签：“测试”，值：14}，
{标签：“Test1”，值：16}，
{标签：“Test2”，值：17}，
{标签：“Test3”，值：18}，
]
};
}
})
您可以在html和js中这样使用

实际上，下面的代码不是一个组件

示例HTML代码

我把这个问题理解为“如何在vue.js中使用数据列表中的对象”

什么是数据表？

DataList只提供填充其他控件的模板
主要用于文本输入，以提供组合框功能（也允许选择新内容）
目前，浏览器中的实现差异很大，因此最好只依赖基本的标签呈现（不要使用值，因为浏览器处理它的方式不同）

在vue中与对象一起使用它
这个想法是使用字符串，并检查每个输入的变化，如果我们有一个完美的匹配。使用
：value
将在chrome中显示id，这可能不是您想要的。这不适用于相同的命名标签，但同样，这种输入在这种情况下没有什么意义


Vue.component（'test-data-list'{
道具：['label'，'options'，'value']，
模板：`
{{label}}
{{option.label}
`,
计算：{
getValue（）{
返回this.value？this.value.label:“”；
}
},
方法：{
更改（e）{
设值=e.currentTarget.value；
如果（值）{
让sel=this.options.filter（c=>c.label==value）；
如果（选择长度==1）{
this.selection=sel[0]；
}否则{
此项选择={
标签：值，
是新的：真的
}
}
}否则{
this.selection=未定义；
}
this.$emit（'input'，this.selection）
}
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
结果：未定义，
群组列表：[{
标签：“某物”，
身份证号码：1
},
{
标签：“这也是”，
身份证号码：2
},
{
标签：“与众不同”，
身份证号码：3
}
]
};
}
})

挑选出来的：
“{result.label}”
新的！
id为{{result.id}的旧对象
没有什么
只需附加label属性。@BhojendraNepal您的意思是什么？
这个$store.getters['Groups/getGroups'].label
@BhojendraNepal oppsss。似乎没有数据显示在该标签上。有人对该标签有想法吗？我们可以用所选标签获取其
值吗？实际上，看起来根本问题可能在数据列表组件中。你能给我看一下那个组件的代码吗？
<datalist id="browsers">
  <option v-for="lst in groupList" v-bind:value="lst">{{lst.label}}</option>  
</datalist>

data:{
  groupObj: {},
  groupList: []
},
methods:{
    groupList(){
        this.groupList = this.$store.getters['Groups/getGroups'];
    },    
},
mounted(){
 this.groupList();
}