According to the information on vuejs.org:
The two-way binding in Vue.js will synchronize any changes made to a child component's 'msg' property back to the parent component's 'parentMsg' property. You can check out more details about this here.
I'm somewhat puzzled about how I can modify a child component's property in a way that these changes will be reflected back in its parent.
router
// Setting up router rules.
router.map({
'/categories': {
// The List.vue
component: CategoryList,
subRoutes: {
// ... additional rules here ...
'/add': {
// The DetailAdd.vue
component: CategoryDetailAdd
}
}
}
});
List.vue (the parent)
<template>
<tab v-bind:tabs="tabs" :active="active"></tab>
<div class="col-lg-12">
<router-view :categories="categories"></router-view>
</div>
</template>
<script>
var Tab = require('../common/Tab.vue');
export default{
components:{
tab: Tab
},
data() {
return {
categories: [],
tabs: [],
active: '1'
};
},
ready() {
this.$http.get('/categories').then((response) => {
// success
this.$set('categories', response.data.categories);
this.$set('tabs', response.data.tabs);
this.$set('active', response.data.active);
}, (response) => {
// error handling
})
}
}
</script>
DetailAdd.vue (the child)
<template>
<form class="form-horizontal" method="post" action="/categories/add">
<div class="form-group">
<label for="name" class="col-md-2 control-label">name</label>
<div class="col-md-10">
<input id="name" type="text" class="form-control" name="name" value="" />
</div>
</div>
<div class="form-group">
<label for="category_id" class="col-md-2 control-label">superiror</label>
<formselect></formselect>
</div>
<div class="form-group">
<label for="sort_order" class="col-md-2 control-label">sort</label>
<div class="col-md-10">
<input id="name" type="text" class="form-control" name="sort_order" value="" />
</div>
</div>
<formbutton></formbutton>
</form>
</template>
<script>
var FormSelect = require('../common/FormSelect.vue');
var FormButton = require('../common/FormButton.vue');
export default{
components: {
formselect: FormSelect,
formbutton: FormButton
}
}
$(function() {
$('.nav-tabs').on('ready', function() {
$('.nav-tabs li').attr('class', '');
$('.nav-tabs li:last').attr('class', 'active');
});
});
</script>
All I want to do is update the active property in the parent component (List.vue). Is there a recommended approach to achieve this?
Thank you all for your assistance!