如何在Vuejs Treeview中添加复选框并链接到模型？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Vuejs Treeview中添加复选框并链接到模型？相关的知识，希望对你有一定的参考价值。
我想为Vuejs Treeview添加复选框。所以我在模板中添加了一个复选框作为此代码：
<script type="text/x-template" id="item-template">
<li>
<input type="checkbox" id="checkbox">
<span
:class="{bold: isFolder}"
@click="toggle"
@dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</span>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
</ul>
</li>
</script>
但我不知道如何将这些复选框链接到像这样的example模型。请帮忙！非常感谢你！
答案
我认为最简单的方法是使用VueX。
商店有一个公共变量，可以从任何地方访问所有checkBox。
单击复选框时，它会更新商店。
https://jsfiddle.net/u91mxc58/14/
const store = new Vuex.Store({
state: {
checkBoxes:[],
},
mutations: {
updateCheckBoxes(state, value) {
state.checkBoxes = value;
}
}
})
// demo data
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object,
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
},
checkBoxes: {
// accesseur
get: function () {
return store.state.checkBoxes;
},
// mutateur
set: function (newValue) {
store.commit('updateCheckBoxes', newValue);
}
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
// boot up the demo
var demo = new Vue({
el: '#demo',
data: function() {
return {
treeData: data
};
},
computed: {
checkBoxes() {
return store.state.checkBoxes;
}
}
})body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<!-- item template -->
<script type="text/x-template" id="item-template">
<li>
<input v-model="checkBoxes" type="checkbox" :value="model.name" id="checkbox">
<span
:class="{bold: isFolder}"
@click="toggle"
@dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</span>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
<!-- the demo root element -->
<ul id="demo">
<div>{{ checkBoxes }}</div>
<item
class="item"
:model="treeData">
</item>
</ul>以上是关于如何在Vuejs Treeview中添加复选框并链接到模型？的主要内容，如果未能解决你的问题，请参考以下文章