Два приведенных ниже примера содержат одинаковую точную разметку шаблона, но визуализируются совершенно по-разному
Пример 1 (выпуск)
В приведенном ниже фрагменте вы увидите, что визуализированный вывод содержит только 1флажок, когда он должен содержать 2 (см. второй пример для правильного отображения)
const store = new Vuex.Store({
state: {
attribute: {
tag: true,
bag: false
}
},
mutations: {
setAttr(state, {
value,
attribute
}) {
state.attribute[attribute] = value;
}
}
});
Vue.component('custom-checkbox', {
props: ['attribute'],
template: '<div><input type="checkbox" v-model="checkBox">{{attribute}}</div>',
computed: {
checkBox: {
get() {
return this.$store.state.attribute[this.attribute]
},
set(value) {
this.$store.commit('updateMessage', {
value,
attribute: this.attribute
});
}
}
}
});
new Vue({
el: '#app',
store
});
<div id="app">
<div>
<custom-checkbox attribute="tag" />
<custom-checkbox attribute="bag" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
Пример 2 (ожидается)
const store = new Vuex.Store({
state: {
attribute: {
tag: true,
bag: false
}
},
mutations: {
setAttr(state, { value, attribute }) {
state.attribute[attribute] = value;
}
}
});
Vue.component('custom-checkbox', {
props: ['attribute'],
template: '<div><input type="checkbox" v-model="checkBox">{{attribute}}</div>',
computed: {
checkBox: {
get() {
return this.$store.state.attribute[this.attribute]
},
set(value) {
this.$store.commit('updateMessage', {
value,
attribute: this.attribute
});
}
}
}
});
new Vue({
el: '#app',
store,
template: '<div><custom-checkbox attribute="tag" /><custom-checkbox attribute="bag" /></div>'
});
<html>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
</body>
</html>
Issue
Из того, что я понимаю, как работает vue, он берет содержимое #app и использует его в качестве шаблона, еслиtemplate явно не установлено в экземпляре.
Если это так, то почему первый рендеринг отображает только 1 элемент, а второй - оба?
Поведение кажется непоследовательным, особенно с учетомШаблон одинаков на обоих.