Vue: Add "datalist" html5 element support to v-model

[asolopovas]

What problem does this feature solve?

Allows to utilize datalist html5 element instead of javascript plugins like typeahead.

What does the proposed API look like?

http://codepen.io/asolopovas/pen/KWRGXE?editors=1111

[posva]

It already works, you just have to move the v-model to the input

[asolopovas]

Is there a way to catch v-for option object value? Lest say that my <option>{{object.name}} {{object.surname}}</option> how can I catch the selected object ?

[posva]

I'm sorry, I don't understand your question. If you have a question, please ask it on the forum or StackOverflow.
You may find what you need by using the search on the docs: https://vuejs.org/v2/guide/ It works like a charm 🙂

[asolopovas]

Thats the thing that the guide does not explain this particular use case.

<input v-model='input' @input="performSearch()">
<datalist>
    <option v-for="result in results"  :value="result.name + ' ' result.surname">{{result.name}} {{result.surname}}</option>
</datalist>

performSearch fetches a list of objects that are required elsewhere in the code I an need to catch the selected result as it has additional data to be processed. Events like @select or @change do not catch the result they only do catch binded value.

[posva]

use a computed value to save the value as at object but read it as a string. If you have further questions, please, use the forum

[asolopovas]

@posva thanks will try that

[Jurcik84]

HTML datalist / HTML5 feature is not supported in Vue.js architectiure.

[kakugiki]

Still not working. It only displays all the options after removed the v-model from the input.

[pedrorckt]

It works for me with v-model.lazy="item"!