Vue.js set data outside component

Question

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

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.component('test', {
	template: '<p>{{date}}</p>',
  data() {
  	return {
    		date: ""
    }
  }
});

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

<script src="https://cdnjs.cloudflare.com/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.

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
– Ikbel, Commented Jul 20, 2017 at 13:14

Ikbel · Accepted Answer · 2017-07-20 13:10:33Z

3

This should work.

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

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

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

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


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

answered Jul 20, 2017 at 13:10

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

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

Comments

Roy J · Accepted Answer · 2017-07-20 12:51:25Z

You can refer to a component'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: ''
  },
  components: {
    cityInput: {
      data() {
        return {
          ciudad: ''
        }
      }
    }
  }
})

<script src="//cdnjs.cloudflare.com/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>

wegelagerer · Accepted Answer · 2017-07-20 11:08:45Z

0

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

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

edited Jul 20, 2017 at 11:08

answered Jul 20, 2017 at 10:54

wegelagerer

3,74011 gold badges44 silver badges61 bronze badges

5 Comments

Roy J Over a year ago

You want to put this.initDate as the initial value for date, tho, right?

Jenssen Over a year ago

No, I don't want to use props for this. I have lots of textfields etc.... any Idea how I could fix this?

wegelagerer Over a year ago

@Jenssen Is it always the same value or does it vary? You can set the default value of the property (i.e. you don't have to define anything).

Jenssen Over a year ago

@Agramer no it's not. I would like to use this with Laravel old('date');

Jenssen Over a year ago

This is working: jsfiddle.net/v5djagta but he's not working with components.

Collectives™ on Stack Overflow

Vue.js set data outside component

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related