Electron-Vue-Bosket

[m-mazeev]

Hi. I have a problem with model.

<template>
  <div id="app">
       <TreeView :model="model" category="children"></TreeView>
  </div>
</template>

<script>
  import { TreeView } from "@bosket/vue"
  import { string } from "@bosket/tools"

  export default {
    name: 'test-bosket',
    components: {
      "TreeView": TreeView
    },
    data: function() {
            return {
              selection: [],
              category: "children",
              model: [{
                label: "Animals",
                  children: [{
                    label: "Mammals",
                      children: [
                        { label: "Tiger" },
                        { label: "Platypus" },
                        { label: "Bear" }
                      ]
                    }, {
                    label: "Reptiles",
                      children: [
                        { label: "Turtle" },
                        { label: "Crocodile" }
                      ]
                    }]
              }]
        }
    }
  }
</script>

<style>
  /* CSS */
</style>

When I try to run app? I have error.

 [Vue warn]: Error in render: "TypeError: Cannot read property 'indexOf' of undefined"

found in

---> <TreeViewNode>
       <WithTransitionTreeViewNode>
         <TreeView>
           <WithLabelsTreeView>
             <WithListenerWithLabelsTreeView>
               <WithListenerWithListenerWithLabelsTreeView>
                 <Passmanager> at src/renderer/App.vue
                   <Root>
And error stack
TypeError: Cannot read property 'indexOf' of undefined
    at Object.contains (/node_modules/@bosket/tools/bundle/tools.umd.min.js:1:3284)
    at n.o.isSelected (/node_modules/@bosket/core/bundle/core.umd.min.js:1:11309)
    at n.o.liCss (/node_modules/@bosket/core/bundle/core.umd.min.js:1:12388)
    at /node_modules/@bosket/vue/bundle/vue.umd.min.js:1:7413
    at Array.map (native)
    at Proxy.render (/node_modules/@bosket/vue/bundle/vue.umd.min.js:1:7346)
    at VueComponent.Vue._render (webpack-internal:///0:4545:22)
    at VueComponent.updateComponent (webpack-internal:///0:2789:21)
    at Watcher.get (webpack-internal:///0:3143:25)
    at new Watcher (webpack-internal:///0:3132:12)

Can you help me solve this problem?

[elbywan]

@m-mazeev Hi!

You are missing some props here. Try this:

<template>
  <div id="app">
       <TreeView
            :model="model"
            category="children"
            :selection="selection"
            :onSelect="onSelect"
            :display="display"
        />
  </div>
</template>

<script>
  import { TreeView } from "@bosket/vue"
  import { string } from "@bosket/tools"

  export default {
    name: 'test-bosket',
    components: {
      "TreeView": TreeView
    },
    methods: {
        onSelect(newSelection) {
            this.selection = newSelection
        },
        display(item) {
            return item.label
        }
    },
    data: function() {
            return {
              selection: [],
              category: "children",
              model: [{
                label: "Animals",
                  children: [{
                    label: "Mammals",
                      children: [
                        { label: "Tiger" },
                        { label: "Platypus" },
                        { label: "Bear" }
                      ]
                    }, {
                    label: "Reptiles",
                      children: [
                        { label: "Turtle" },
                        { label: "Crocodile" }
                      ]
                    }]
              }]
        }
    }
  }
</script>

<style>
  /* CSS */
</style>

[m-mazeev]

Thanks. Now it works.