DataList: Как скрыть значение поиска? - PullRequest
Новая
       31

DataList: Как скрыть значение поиска?

0 голосов
/ 31 января 2020

Этот вопрос был отредактирован, потому что я выяснил, что он связан не с VueJS, а с HTML Datalist. Я также закрыл этот вопрос как дубликат Установка скрытых значений параметра списка данных .

Любой селектор в мире имеет свойство отображения в качестве метки и значение поиска, чтобы связать его со списком объектов. Пока все в порядке. Мне нужно скрыть идентификаторы поиска, которые не имеют смысла для моих пользователей.

Каждая опция в моем списке выбора показывает две строки. Первая строка - это lookup-id, который не должен быть представлен пользователю. Вторая строка - это предполагаемое отображаемое значение (метка).

Мне нужна опция, чтобы скрыть значение поиска! Я даже не могу найти HTML списка выбора, я полагаю, он генерируется браузером и не добавляется в DOM.

HLEP !!!

enter image description here

<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>

1 Ответ

0 голосов
/ 31 января 2020

Посмотрите на свои вычисления: 

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

computedLookupById верните вам объект опции, например, если id = 1, возвращаемое значение будет выглядеть так: 

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

В вашем шаблоне у вас есть эта строка: 

LookupResult: {{ computedLookupById | json }}

Если вы хотите скрыть id, то вы должны сделать что-то вроде этого: 

LookupResult: {{ computedLookupById.name }}

Также похоже, что json фильтр удален из vue в соответствии с этим https://vuejs.org/v2/guide/migration.html#Built -In-Text-Filters-remove .

...