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.
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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.