JS Bin
// source http://jsbin.com/tononar
'use strict';
Vue.use(Vuex);
var store = new Vuex.Store({
state: {
blindsItem: false
},
mutations: {
TOGGLE: function TOGGLE(state) {
state.blindsItem = !state.blindsItem;
}
},
actions: {
toggle: function toggle(_ref) {
var commit = _ref.commit;
commit('TOGGLE');
}
}
});
var mixins = {
computed: {
blindsItemState: function blindsItemState() {
return this.$store.state.blindsItem;
}
},
methods: {
toggle: function toggle(data) {
this.$store.dispatch('toggle', data);
}
}
};
Vue.component('blinds-accordion', {
mixins: [mixins],
template: '\n <div class="blinds-accordion">\n <blinds-item></blinds-item>\n <blinds-item></blinds-item>\n </div>\n '
});
Vue.component('blinds-item', {
mixins: [mixins],
template: '\n <div class="blinds-item">\n <div class="blinds__header" @click.prevent="toggle()">\n Accordion Title\n </div>\n <div class="blinds__content" v-show="blindsItemState">\n Accordion Content\n </div>\n </div>'
});
// Root
new Vue({
el: '#app',
store: store
});
.blinds-item {
margin-bottom: 10px;
cursor: pointer;
}
.blinds-item:hover {
color: #f00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.blinds-item {
margin-bottom: 10px;
cursor: pointer;
}
.blinds-item:hover {
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<blinds-accordion>
</blinds-accordion>
</div>
<script src="https://cdn.jsdelivr.net/g/vuex@2.0.0(vuex.js),vue@2.0.3(vue.js)"></script>
<script id="jsbin-javascript">
'use strict';
Vue.use(Vuex);
var store = new Vuex.Store({
state: {
blindsItem: false
},
mutations: {
TOGGLE: function TOGGLE(state) {
state.blindsItem = !state.blindsItem;
}
},
actions: {
toggle: function toggle(_ref) {
var commit = _ref.commit;
commit('TOGGLE');
}
}
});
var mixins = {
computed: {
blindsItemState: function blindsItemState() {
return this.$store.state.blindsItem;
}
},
methods: {
toggle: function toggle(data) {
this.$store.dispatch('toggle', data);
}
}
};
Vue.component('blinds-accordion', {
mixins: [mixins],
template: '\n <div class="blinds-accordion">\n <blinds-item></blinds-item>\n <blinds-item></blinds-item>\n </div>\n '
});
Vue.component('blinds-item', {
mixins: [mixins],
template: '\n <div class="blinds-item">\n <div class="blinds__header" @click.prevent="toggle()">\n Accordion Title\n </div>\n <div class="blinds__content" v-show="blindsItemState">\n Accordion Content\n </div>\n </div>'
});
// Root
new Vue({
el: '#app',
store: store
});
</script>
<script id="jsbin-source-css" type="text/css">.blinds-item
margin-bottom: 10px
cursor: pointer
&:hover
color: red</script>
<script id="jsbin-source-javascript" type="text/javascript">Vue.use(Vuex)
const store = new Vuex.Store({
state: {
blindsItem: false
},
mutations: {
TOGGLE(state) {
state.blindsItem = !state.blindsItem;
}
},
actions: {
toggle({commit}) {
commit('TOGGLE');
}
}
});
const mixins = {
computed: {
blindsItemState() {
return this.$store.state.blindsItem;
},
},
methods:{
toggle(data){
this.$store.dispatch('toggle', data);
}
}
};
Vue.component('blinds-accordion', {
mixins:[mixins],
template: `
<div class="blinds-accordion">
<blinds-item></blinds-item>
<blinds-item></blinds-item>
</div>
`
});
Vue.component('blinds-item', {
mixins:[mixins],
template: `
<div class="blinds-item">
<div class="blinds__header" @click.prevent="toggle()">
Accordion Title
</div>
<div class="blinds__content" v-show="blindsItemState">
Accordion Content
</div>
</div>`
});
// Root
new Vue({
el: '#app',
store: store
});</script></body>
</html>