Extendin local component in VUE.js
Extending local component in VUE.js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<first_vue></first_vue>
<div id="domain">
<secondary_vue v-bind:parentMethod="firstVue"></secondary_vue>
</div>
JavaScript
var ParentConstructor = Vue.extend({
data: function() {
return {
name: 'mmmm'
};},
methods: {
calculateQuickBill: function(qb) {
qb.Taxes[0] = (qb.TaxAmounts.Taxable[0]) ? qb.Amount * qb.ClientsTaxRates[0] : 0.0;
qb.Taxes[1] = (qb.TaxAmounts.Taxable[1]) ? (qb.Amount + qb.Taxes[0]) * qb.ClientsTaxRates[1] : 0.0;
qb.Taxes[2] = (qb.TaxAmounts.Taxable[2]) ? qb.Amount * qb.ClientsTaxRates[2] : 0.0;
}
}
});
var firstVue = new ParentConstructor({
});
Vue.component('first_vue', ParentConstructor);
alert(firstVue.name);
var MainVue = Vue.extend({
props: {parentMethod: String},
template: '<p>Privet</p> ',
data: function() {
return {
form: {
'name': '',
'git_repo': '',
'auto_deploy': '',
'create_db': ''
},
ajaxResponse: 'hello world'
};
}
});
var secondary_vue = new MainVue({
props: {parentMethod: String},
el: '#domain',
created: function() {
alert(this.parentMethod);
console.log("this.parentMethod: " + this.parentMethod);
},
methods: {
postDomain: function() {
// do post in this place
/*
this.$http.post('{{ route('
domain.store ') }}',
function(data, status, request) {
this.$set('ajaxResponse', data);
}, {
data: this.form
}).error(function(data, status, request) {
this.$set('ajaxResponse', data);
});
*/
alert(this.parentMethod);
alert(firstVue.name);
alert('postDomain called: ' + this.ajaxResponse);
}
}
});
Vue.component('secondary_vue', MainVue);
secondary_vue.postDomain();