当前位置: 动力学知识库 > 问答 > 编程问答 >

typeahead.js - Vue.js - Typeahead Directive

问题描述:

Vue.js Directive for Typeahead

I am trying to write a Vue Directive for typeahead.js functionality. I was able to instantiate typeahead on the input form control and also assign it options and dataset. Event handling too was not a problem.

The Issue :

Now, I also want to control the typeahead input element from the component. For example, I would like to control these methods $(el).typeahead('destroy') or $(el).typeahead('open'), etc. from the component.

How can i call these methods from the Component? Is it possible ?

网友答案:

Ok, I just figured it out 2 minutes after typing the question.

I add a ref to the input tag.

<!-- bindings is an object which has the "options" and "dataset" -->
<input ref="ttInput" v-typeahead="bindings" />

Then, I have added a method in the component which executes typeahead methods from the component:

...
methods: {
  methodHook (action) {
    const el = this.$refs.ttInput
    $(el).typeahead(action)
  }
}
...

So, now, in the html template, i can have a button/buttons:

<button type="button" @click="methodHook('open')" >Open</button>
<button type="button" @click="methodHook('close')">Close</button>

Works like a charm.

Thanks

分享给朋友:
您可能感兴趣的文章:
随机阅读: