How to update data from a Vue 2 directive?

Asked

Viewed 360 times

1

How can I perform the following procedure to update data from a directive in Vue.

var select = Vue.directive('select', {
	twoWay: true,
	bind: function(el, binding, vnode){
		
    // Como acessar op ?????
  	// this.set()
  }
})

new Vue({
	el: '#demo',
    data: function(){
  	return {
    	op: 2
    }
  }
});
select{
  width:200px;
  padding:5px;
 }
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">
  <p>Opção: {{ op }}</p>
  <select v-select>
    <option v-bind:value="1">1</option>
    <option v-bind:value="2">2</option>
  </select>
</div>

vue.js
  • 1

    @Jjay did not understand very well the purpose of its implementation. What do you want to achieve? Why not use a v-model to update the data?

  • I am using Materialize in a project, and some resources use jQuery, in this case, in the select field would use the method . change() from jQuery to intercept and then update the model value and enforce the Vue scope.

1 answer

0

The Twoway property has been removed in version 2 of Vue. The best way to do what you want is simply to use the native Vue.js directive created for this v-model. With it you can update a content from the value of select.

new Vue({
  el: '#demo',
  data: function() {
    return {
      op: 2
    }
  }
});
select {
  width: 200px;
  padding: 5px;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
  <p>Opção: {{ op }}</p>
  <select v-model='op'>
    <option v-bind:value="1">1</option>
    <option v-bind:value="2">2</option>
  </select>
</div>

  • That way it works. However, in Materialize the select field is hidden and a stylized list simulates its actions, so the control of such actions are performed by jQuery in order to propagate them to the respective select field.

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.