DataList:如何隐藏查找值? [英] DataList: How to hide the lookup value?

问题描述

编辑此问题是因为我发现与 VueJS 无关，而是与 HTML Datalist 相关.我还关闭了这个问题作为

<datalist id="options1"><option v-for="option in this.options" v-bind:value="option.id" >{{ option.name }}</option></数据列表><datalist id="options2"><option v-for="option in this.options" v-bind:value="option" >{{ option.name }}</option></数据列表><datalist id="options3"><option v-for="option in this.options" v-bind:value="option.name" >{{ option.name }}</option></数据列表>我需要隐藏 ID.<br>选择后要在框中显示显​​示值，并将查找值发送给模型(selectedId).<br><input list="options1" v-model="selectedId" ><br>所选 ID 为:{{ selectedId }}

查找结果:{{calculatedLookupById |json }}<hr><br><br>我期待我可以将整个对象发送到模型.但实际上是一个字符串.<br><input list="options2" v-model="selectedOption" ><br>所选 ID 为:{{ selectedOption |json }}<br><br><hr><br><br>如果我将显示值发送到模型，我必须查找对象.将花费计算时间并且仅在显示值唯一时才有效:
<input list="options3" v-model="selectedName" ><br>所选 ID 为:{{ selectedName |json }}<br><br>查找结果:{{计算的LookupByName |json }}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><脚本>新的 Vue({el: "#app",数据: {选项: [{ id: 0, name: "one" },//所以，我的显示值不是唯一的.我不能用它来幸运.{ id: 1, name: "one" },{ id: 2, name: "两个" },{ ID:3，名称:树"}],selectedOption:空，selectedId:空，选定名称:空},计算:{计算的LookupById(){返回 this.options.find(p => {返回 p.id == this.selectedId;});},计算的LookupByName(){返回 this.options.find(p => {返回 p.name == this.selectedName;});}},方法: {切换:功能(待办事项){todo.done = !todo.done}}})

解决方案

看看你的计算:

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

computedLookupById 返回给你一个option的对象，比如id = 1，那么返回的值是这样的:

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

在您的模板中，您有这一行:

LookupResult: {{calculatedLookupById |json }}

如果你想隐藏id，那么你应该这样做:

LookupResult: {{calculatedLookupById.name }}

此外，根据此 https://vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed .

This question was edited because I found out is not related to VueJS but to HTML Datalist. I also closed this question as duplicate of Setting hidden datalist option values.

Any selector in the world has a display property as label and a lookup value to link it with a list of objects. So far is ok. I need to hide the lookup id's that makes no sense form my users.

Every option entry of my selection list shows tho lines. The first line is the lookup-id that should not be presented to the user. The second line is the intended display-value (the label).

I need an option to hide the lookup value! I can'e even find the HTML of the selection list, I assume is generated by the browser and not added to the DOM.

HLEP !!!

<div id="app">
    <datalist id="options1">  
    <option v-for="option in this.options" v-bind:value="option.id" >{{ option.name }}</option>
    </datalist>

    <datalist id="options2">  
    <option v-for="option in this.options" v-bind:value="option" >{{ option.name }}</option>
    </datalist>

    <datalist id="options3">  
    <option v-for="option in this.options" v-bind:value="option.name" >{{ option.name }}</option>
    </datalist>

    I need to hide the IDs. <br>The display value should be displayed in the box after selection and the lookup value should be sent to the model (selectedId).<br>

    <input list="options1" v-model="selectedId" ><br>
    Selected ID is: {{ selectedId }}<br><br>

    LookupResult: {{ computedLookupById | json }}

    <hr><br><br>
    I was expecting that I can send the entire object to the model. But is actually a string.<br>
    <input list="options2" v-model="selectedOption" ><br>
    Selected ID is: {{ selectedOption | json }}<br><br>

    <hr><br><br>
    If I send the display value to the model, I have to lookup for the object. Will take computation time and will only work when display values are unique:<br>
    <input list="options3" v-model="selectedName" ><br>
    Selected ID is: {{ selectedName | json }}<br><br>

    LookupResult: {{ computedLookupByName | json }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<script>

new Vue({
  el: "#app",
  data: {
    options: [
      { id: 0, name: "one" }, // So, my display value is not unique. I can't use it for luckup.
      { id: 1, name: "one" },
      { id: 2, name: "two" },
      { id: 3, name: "tree" }
    ],
    selectedOption: null,
    selectedId: null,
    selectedName: null
  },
  computed: {
    computedLookupById() {
        return this.options.find(p => {
        return p.id == this.selectedId;
      });
    },
    computedLookupByName() {
        return this.options.find(p => {
        return p.name == this.selectedName;
      });
    }
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

</script>

解决方案

Take a look at your computed:

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

computedLookupById return to you an object of option, for example, if id = 1, then returned value will be like this:

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

Within your template you have this line:

LookupResult: {{ computedLookupById | json }}

If you want to hide id, then you should do something like this:

LookupResult: {{ computedLookupById.name }}

Also it looks like json filter is removed from vue according to this https://vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed .

这篇关于DataList:如何隐藏查找值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！