我刚安装好了 VUE </跨度> -instant为搜索提供自动建议并获取这样的示例代码
https://jsfiddle.net/santiblanko/dqo6vr57/
我的问题是如何移动组件’ VUE </跨度> -instant’’’’:VueInstant.VueInstant到一个新的 Vue公司 </跨度> 像这样的组件:
Vue.component(” VUE </跨度> -instant-component’,{ // VUE </跨度> -瞬间}
我尝试过这样的事情:
Vue.component(” VUE </跨度> -instant’,{ 数据 -
我稍微误解了这个问题,下面是原来的答案。
这是您可以将上面的代码转换为组件的方式:
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 } })
的 原始答案 强>
我只想将上面的示例移动到表单Vue.component()。代码不应该在新的Vue()中但在Vue.component()中
如果我理解正确,您正在寻找的语法是
Vue.component('vue-instant', VueInstant.VueInstant)
更新 小提琴 。