Currently, I am harnessing the power of VueJS and its components to create an extensive array of datalists and selectors, each equipped with a submit button for validation upon form submission.
Initially, I successfully implemented a datalist within a component that rendered options and provided type completion - it worked flawlessly! However, when I attempted to convert this functionality into a VueJS Component and passed the dataarray as a property, my list of options ceased to render.
Comparing Two Datalist elements...
https://i.stack.imgur.com/gHsk2.png
The upper image represents the "raw" datalist which functions perfectly
https://i.stack.imgur.com/MSeO0.png
However, in the Vue.js component version, no options are displayed...
https://i.stack.imgur.com/SXEfr.png
The options are simply not visible when compared to the first image...
https://i.stack.imgur.com/va0DA.png
The VueJS Component for Datalist
<template>
<div>
<input type="text" v-model="item" list="data_input" v-on:input="selectionChanged">
<datalist id="yourdatalist">
<option v-for="item in data_input">{{item}}</option>
</datalist>
</div>
</template>
<script>
export default {
name: 'Datalist',
props: ['inputDataList'],
data () {
return {
selection: '',
item:'',
data_input:this.inputDataList
}
},
methods: {
selectionChanged: function(element) {
console.log("selection = "+this.selection+", new value = " + element.target.value);
var newSelection = element.target.value;
if (newSelection != this.selection) {
// newSelection changes on every keystroke, so you must keep diffing it with your known data
for (var i=0; i<this.data_input.length; i++) {
if (this.data_input[i] == newSelection) {
this.selection = newSelection
console.log("selection = "+this.selection+" now");
this.$emit('selectionChanged', this.selection);
}
}
}
},
},
}
</script>
The HTML code for the calling component
<p>Examples of Datalists</p>
<input type="text" v-model="film" list="films" v-on:input="filmChanged">
<datalist id="films">
<option v-for="film in films">{{film}}</option>
</datalist>
<div v-if="focusedfilm">
<h6>You have picked {{focusedfilm}}</h6>
</div>
<br/>
<p>Examples of Child Component Datalist</p>
<Datalist :inputDataList="films"/>