I just installed vue-instant to make an auto suggestion for search and get an example code like this

/

My question is how to move ponents 'vue-instant': VueInstant.VueInstant to a new Vue ponent like this one:

Vueponent('vue-instant-ponent', {
  //vue-instant
}

I've tried something like this:

Vueponent('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(';query=' + this.value)
        .then(function(response) {
          response.data.results.forEach(function(a) {
            that.suggestions.push(a)
          });
        });
    }
  }
})

but it doesn't work

I just installed vue-instant to make an auto suggestion for search and get an example code like this

https://jsfiddle/santiblanko/dqo6vr57/

My question is how to move ponents 'vue-instant': VueInstant.VueInstant to a new Vue ponent like this one:

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

I've tried something like this:

Vue.ponent('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/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

• javascript
• vue.js
• vuejs2
• vue-ponent

• What are you trying to do? If you just want to avoid the ponents block at the end of your fiddle, you can call Vue.ponent('vue-instant', VueInstant.VueInstant); before constructing the Vue instance to register it. – Botje Commented Sep 19, 2017 at 15:18
• @Botje, it give me suggestionAttribute is not defined – Abid Rakhmansyah Commented Sep 19, 2017 at 15:21
• Then I'm lost as to what you are trying to do. Are you trying to create a new ponent that extends VueInstant with some defaults? – Botje Commented Sep 19, 2017 at 15:23
• @Botje I just want to move the example above to the form Vue.ponent () . The code should not in new Vue() but in Vue.ponent () – Abid Rakhmansyah Commented Sep 19, 2017 at 15:28

1 Answer 1

I slightly misunderstood the question, below is the original answer.

This is how you might turn the code above into a ponent:

Vue.ponent("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-autoplete="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/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
        .then(function(response) {
        response.data.results.forEach(function(a) {
          that.suggestions.push(a)
        })
      })
    }
  },
  ponents: {
    'vue-instant': VueInstant.VueInstant
  }
})

Original answer

I just want to move the example above to the form Vue.ponent () . The code should not in new Vue() but in Vue.ponent ()

If I understand correctly, the syntax you are looking for is

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

Updated fiddle.