Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Vu2.js 2: Using HTML5 Input plus Data List for auto-suggest entry field. Based on blog article that creates simple Vue.js 2 application with content from news api
<div class="sourceselection">
<div class="jumbotron">
<h2><span class="glyphicon glyphicon-list-alt"></span>&nbsp;News List</h2>
<h4>Select News Source</h4>
<input v-model="source" list="newssources-list" v-on:input="sourceChanged"
name="source-selection" id="source-selection" class="form-control"
placeholder="Please specify news source ..."/>
<datalist id="newssources-list">
<option v-for="source in sources" v-bind:value="" v-bind:label=""></option>
<div v-if="deepSource">
<a v-bind:href="deepSource.url" class="btn btn-primary" target="_blank">Go To {{}} Website</a>
export default {
name: 'sourceselection',
data () {
return {
sources: [],
source: '',
deepSource: ''
methods: {
sourceChanged: function(e) {
console.log("source = "+this.source+" new value = ";
var newSource =;
// only action if value is different from current deepSource
if (newSource!= {
for (var i=0; i<this.sources.length; i++) {
if (this.sources[i].name == newSource) {
this.deepSource = this.sources[i];
this.source =;
created: function () {
var api = "";
this.axios.get(api).then((response) => {
this.sources =;
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
Copy link

EMCP commented Dec 19, 2018

Could you please have a look at my attempt to use a datalist component? When I use more than 1.. the autocompletion array is getting assigned across all of the instances of the component and I am unsure how to prevent it.. . Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment