I use https://santiblanko.github.io/vue-instant/ for autocompletion with Vue.
It works as I expected, except I cannot post the value inside the ‘input’ value to a form.
When I submit the form, the value inside the input is not posted to my backend server.
So that there is to create a hidden value when I submit so that I can read that input value.
How to do this. I just want the form and the value to be submitted as I cick magnifier icon.
https://codepen.io/snarex/pen/vwQjWR
<link rel=”stylesheet” type=”text/css” href=”https://unpkg.com/vue-instant@0.0.10/dist/vue-instant.css">
<script type=”text/javascript” src=”https://unpkg.com/vue/dist/vue.js"></script>
<script type=”text/javascript” src=”https://unpkg.com/vue-clickaway@2.1.0/dist/vue-clickaway.js"></script>
<script type=”text/javascript” src=”https://unpkg.com/vue-instant@1.0.4/dist/vue-instant.browser.js"></script>
<script type=”text/javascript” src=”https://unpkg.com/axios/dist/axios.min.js"></script>
<!– TODO: Missing CoffeeScript 2 –>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
console.log(VueInstant)
new Vue({
el: ‘#app’,
data: {
value: ‘’,
suggestionAttribute: ‘original_title’,
suggestions: [],
selectedEvent: “”
},
methods: {
clickInput: function() {
this.selectedEvent = ‘click input’
},
clickButton: function() {
this.selectedEvent = ‘click button’
},
selected: function() {
this.selectedEvent = ‘selection changed’
},
enter: function() {
this.selectedEvent = ‘enter’
},
keyUp: function() {
this.selectedEvent = ‘keyup pressed’
},
keyDown: function() {
this.selectedEvent = ‘keyDown pressed’
},
keyRight: function() {
this.selectedEvent = ‘keyRight pressed’
},
clear: function() {
this.selectedEvent = ‘clear input’
},
escape: function() {
this.selectedEvent = ‘escape’
},
changed: function() {
var that = this
this.suggestions = []
axios.get(‘https://api.themoviedb.org/3/search/movie?api\_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
.then(function(response) {
response.data.results.forEach(function(a) {
that.suggestions.push(a)
})
})
}
},
components: {
‘vue-instant’: VueInstant.VueInstant
}
})
}
//]]>
</script>
<form action=”https://www.google.com" method=”GET”>
<div id=”app”>
<label>{selectedEvent}</label>
<vue-instant :suggestonallwords=”true” :suggestion-attribute=”suggestionAttribute” v-model=”value” :disabled=”false” @input=”changed” @click-input=”clickInput” @click-button=”clickButton” @selected=”selected” @enter=”enter” @key-up=”keyUp” @key-down=”keyDown”
@key-right=”keyRight” @clear=”clear” @escape=”escape” :show-autocomplete=”true” :autofocus=”false” :suggestions=”suggestions” name=”customName” placeholder=”custom placeholder” type=”google”></vue-instant>
</div>
</form>
Solution :
If I understand correctly, you want to post the suggested value to the server inside a form data object? If that’s right, you can alter the clickButton method as follows.
clickButton: function() {
this.selectedEvent = ‘click button’;
var formData = new FormData();
formData.append(“selectedMovie”, this.value);
axios({
method: ‘post’,
url: ‘/yourapi/endpoint/‘,
data: {
formData:formData
}
}).then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
});
}
Solution 2:
You can add the following to the html of the form element v-on:submit.prevent=”send”. And then add a send function to the component’s methods in which you access this.value and do whatever you need to do with it.