Vue.js directive within a template

Question

Based on this example https://vuejs.org/examples/select2.html I try to create component for reuse in a future. Unfortunately, my code doesn't work.

HTML:

<template id="my-template">
  <p>Selected: {{selected}}</p>
  <select v-select="selected" :options="options">
    <option value="0">default</option>
  </select>
</template>

<div id="app">
  <my-component></my-component>
</div>

Vue:

Vue.component('my-component', {
    template: '#my-template'
})

Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],

  bind: function () {
    var self = this
    $(this.el)
      .select2({
        data: this.params.options
      })
      .on('change', function () {
        self.set(this.value)
      })
  },
  update: function (value) {
    $(this.el).val(value).trigger('change')
  },
  unbind: function () {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    selected: 0,
    options: [
      { id: 1, text: 'hello' },
      { id: 2, text: 'what' }
    ]
  }
})

https://jsfiddle.net/xz62be63/

Thank you for any help!

Linus Borg · Accepted Answer · 2016-04-06 13:26:41Z

1

your problem has nothing to do with the directive itself.

selected and options is defined in the data of your Vue main instance, not in the data of my-component - so it's not available in its template.

But you can pass it from the main instance to the component using props:

<div id="app">
  <my-component :selected.sync="selected" :options="options"></my-component>
  <!-- added the .sync modifier to transfer the value change back up to the main instance-->
</div>

and in the code:

Vue.component('my-component', {
    template: '#my-template',
    props: ['selected','options']
})

updated fiddle: https://jsfiddle.net/Linusborg/rj1kLLuc/

edited Apr 6, 2016 at 13:26

answered Apr 6, 2016 at 12:49

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mugik Over a year ago

Thank you, Linus! Your explanations are very useful for me!

Mugik Over a year ago

In addition: check the version of jQuery. Because of my fiddle include jquery v2.1.4 the jquery-select2 didn't initialized even with empty data.

Collectives™ on Stack Overflow

Vue.js directive within a template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related