I've got a ponent and I would like to set a data item outside the ponent.

How would I do this with a directive?

I was thinking about something like this:

Vue.directive('init', {
    bind: function(el, binding, vnode) {
        vnode.context[binding.arg] = binding.value;
    }
});

But it's not working:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Vueponent('test', {
	template: '<p>{{date}}</p>',
  data() {
  	return {
    		date: ""
    }
  }
});

new Vue({
  el: '#app'
})

<script src=".4.1/vue.js"></script>


<div id="app">
  <test v-init:date="'2017-07-20 09:11:42'"></test>
</div>

I've got a ponent and I would like to set a data item outside the ponent.

How would I do this with a directive?

I was thinking about something like this:

Vue.directive('init', {
    bind: function(el, binding, vnode) {
        vnode.context[binding.arg] = binding.value;
    }
});

But it's not working:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Vue.ponent('test', {
	template: '<p>{{date}}</p>',
  data() {
  	return {
    		date: ""
    }
  }
});

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.1/vue.js"></script>


<div id="app">
  <test v-init:date="'2017-07-20 09:11:42'"></test>
</div>

Any Idea how I would get this to work?

--edit--

I don't want to use props for this! I've lots and lots of fields.

• javascript
• vue.js

• By inspecting vnode, it turns out it points to the root vue. That's why it didn't work for you. Check out my answer below for a solution. – Ikbel Commented Jul 20, 2017 at 13:14

3 Answers 3

This should work.

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    let ponent = el.__vue__
    ponent[binding.arg] = binding.value
  }
});

Vue.ponent('test', {
  template: '<p>{{date}}</p>',
  data() {
    return {
      date: ""
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.1/vue.js"></script>


<div id="app">
  <test v-init:date="'2017-07-20 09:11:42'"></test>
</div>

You can refer to a ponent's data using $data.

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Vue.directive('initData', {
  bind: function(el, binding, vnode) {
    vnode.context.$data[binding.arg] = binding.value;
  }
});

new Vue({
  el: '#app',
  data: {
    ciudad: ''
  },
  ponents: {
    cityInput: {
      data() {
        return {
          ciudad: ''
        }
      }
    }
  }
})

<script src="//cdnjs.cloudflare./ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <input v-model="ciudad" v-init:ciudad="'Madrid'"> {{ciudad}}
  <city-input inline-template>
    <div>
      <input v-model="ciudad" v-init-data:ciudad="'Lisbon'"> {{ciudad}}
    </div>
  </city-input>
</div>

If I understood you correctly you should be using props for passing the data to your ponents. As a matter of fact you can use only one variable (either date or initDate), the usage is the same.

Vue.ponent('test', {
  template: '<p>{{date}}</p>',
  props:['initDate'],
  data() {
    return {
            date: ""
    }
  }
});

new Vue({
  el: '#app'
});

And then in html you use it like this:

<div id="app">
  <test :initDate="2017-07-20 09:11:42"></test>
</div>