Menu
I just installed vue-instant to make an auto suggestion for search and get an example code like this
https://jsfiddle.net/santiblanko/dqo6vr57/
My question is how to move components 'vue-instant': VueInstant.VueInstant to a new Vue component like this one:
Vue.component('vue-instant-component', {
//vue-instant
}
I've tried something like this:
Vue.component('vue-instant', {
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)
});
});
}
}
})
but it doesn't work
825
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
One important feature of Vue is the ability to use components. Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.
"VueUse is a collection of utility functions based on Composition API, working for Vue 2 and 3. It's inspired by react-use . This package aims to provide a fast and clean way to use the Vue Composition API.
Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
I slightly misunderstood the question, below is the original answer.
This is how you might turn the code above into a component:
Vue.component("movies",{
template:`
<div>
{{selectedEvent}}
<vue-instant :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>
`,
data(){
return {
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
}
})
Original answer
I just want to move the example above to the form Vue.component () . The code should not in new Vue() but in Vue.component ()
If I understand correctly, the syntax you are looking for is
Vue.component('vue-instant', VueInstant.VueInstant)
Updated fiddle.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
