Vue组件 Vue-Instant

Question

我刚刚安装了vue-instant来为搜索添加自动建议，并得到了以下示例代码：

https://jsfiddle.net/santiblanko/dqo6vr57/

我的问题是如何将组件 'vue-instant': VueInstant.VueInstant 移动到一个新的Vue组件中，就像这个：

Vue.component('vue-instant-component', {
  //vue-instant
}

我尝试过类似这样的东西：

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)
          });
        });
    }
  }
})

但它不起作用

- Abid Rakhmansyah

---

你想做什么？如果你只是想避免在你的fiddle末尾使用components块，你可以在构建Vue实例之前调用Vue.component('vue-instant', VueInstant.VueInstant);来注册它。 - Botje

@Botje，它给我返回suggestionAttribute未定义。 - Abid Rakhmansyah

我对你想要做什么感到困惑。你是想创建一个新组件，该组件继承了VueInstant并带有一些默认设置吗？ - Botje

@Botje 我只想将上面的示例移动到 Vue.component() 表单中。代码不应该在 new Vue() 中，而是在 Vue.component() 中。 - Abid Rakhmansyah

Answer 1

我稍微误解了问题，下面是原始答案。

以下是将上述代码转换为组件的方法：

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()表单中。 代码不应在new Vue()中，而应在Vue.component()中

如果我理解正确，您要寻找的语法是

Vue.component('vue-instant', VueInstant.VueInstant)

更新了代码片段。

- Bert

---

当我把它放在<div id="app">中时，它可以工作。但是当我把它放在组件内部时，就会出现错误。 - Abid Rakhmansyah

@AbidRakhmansyah 你想在组件中包含所有这些处理程序吗？ - Bert

没错 :) 谢谢您！ - Abid Rakhmansyah