DataList：如何隐藏查找值？

Question

编辑此问题是因为我发现与 VueJS 无关，而是与 HTML Datalist 相关。我还将这个问题作为Setting hidden datalist option values 的副本关闭。

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

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

我需要一个选项来隐藏查找值！ 我什至找不到选择列表的 HTML，我假设它是由浏览器生成的，而不是添加到 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>

Answer 1

看看你的计算结果：

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

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

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

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

LookupResult: {{ computedLookupById | json }}

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

LookupResult: {{ computedLookupById.name }}

根据这个https://vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed，看起来json过滤器已从vue中删除。