Select DataList：如何隐藏查找值？

这个问题被编辑了，因为我发现它与VueJS无关，而是与HTML数据列表有关。我还以重复的形式结束了这个问题

世界上的任何选择器都有一个显示特性作为标签，并有一个查找值将其与对象列表链接。到目前为止还可以。我需要隐藏对我的用户毫无意义的查找id

我的选择列表中的每个选项条目都显示这些行。第一行是不应显示给用户的查找id。第二行是预期的显示值（标签）

我需要一个选项来隐藏查找值！ 我甚至找不到选择列表的HTML，我假设它是由浏览器生成的，而不是添加到DOM中

赫莱普

{{option.name}
{{option.name}
{{option.name}
我需要隐藏身份证
选择后，显示值应显示在框中，查找值应发送到模型（selectedId）。



所选ID为：{selectedId}


LookupResult:{{computedLookupById | json}}



我希望可以将整个对象发送到模型。但实际上是一个字符串。



所选ID为：{selectedOption|json}





如果将显示值发送到模型，则必须查找对象。将花费计算时间，并且仅在显示值唯一时才起作用：



所选ID为：{selectedName | json}}


LookupResult:{{computedLookupByName | json}}
新Vue({
el:“应用程序”，
数据：{
选项：[
{id:0，name:“one”}，//因此，我的显示值不是唯一的。我无法将其用于luckup。
{id:1，名称：“一”}，
{id:2，name:“two”}，
{id:3，名称：“tree”}
],
selectedOption:null，
selectedId:null，
selectedName:空
},
计算：{
computedLookupById（）{
返回this.options.find（p=>{
返回p.id==this.selectedId；
});
},
computedLookupByName（）{
返回this.options.find（p=>{
返回p.name==this.selectedName；
});
}
},
方法：{
切换：功能（todo）{
todo.done=！todo.done
}
}
})

查看您的计算机：

computedLookupById() {
    return this.options.find(p => {
    return p.id == this.selectedId;
  });
},

computedLookupById

向您返回选项的对象，例如，如果

id

=1，则返回值如下：

{ id: 1, name: "one" },

LookupResult: {{ computedLookupById.name }}

在模板中有以下行：

LookupResult: {{ computedLookupById | json }}

如果要隐藏

id

，则应执行以下操作：

{ id: 1, name: "one" },

LookupResult: {{ computedLookupById.name }}

---

另外，根据这一点，

json

filter似乎已从vue中删除。

能否显示您的代码示例？好的，我现在看到了您的代码。你到底想隐藏什么值？另外，如果能看到渲染组件的整个图像以及要隐藏的区域，那就太好了。我已经添加了一个答案。你能检查一下吗？嗨@webprogrammer，你的分析是正确的，但不能解决我的需要。我不关心显示值，我是在另一个用户的请求下创建这个示例的。我要强调的是，选择控件应该1）返回所选对象（理想情况下），但这是不可能的，因为该值已序列化为字符串，或者2）返回Id，以便我可以根据对象的唯一Id查找对象。第二种情况是可能的，但会带来恼人的副作用。ID显示为选项模板中的第一行，没有隐藏它的选项。已将我自己的问题（发现与VueJS无关）作为以下内容的副本关闭：