如何在Vuejs Treeview中添加复选框并链接到模型？

Question

我想为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模型。请帮忙！非常感谢你！

Answer 1

我认为最简单的方法是使用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>