How to implement tree-view example properly

Question

I try to implement tree-view from this https://v2.vuejs.org/v2/examples/tree-view.html sample to my laravel 5.5/vue.js application. In resources/assets/js/app.js I added lines :

// 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
        }
    },
    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'
            })
        }
    }
})


window.Vue.use(VueRouter);

In my listing file resources/assets/js/components/tasks/TasksIndex.vue I add item template declaration and calling the root element of the item:

<template>
   <section>
        ...

         <!-- the demo root element -->

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>

    <div
      :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>

    <ul v-show="open" v-if="isFolder">

      <item
        class="item"
        v-for="model in model.children"
        :model="model">
      </item>

      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>

            treeData::{{ treeData }}
            <ul id="demo">
               <item class="item" :model="treeData">
               </item>
            </ul>
        ...

   </section>
</template>




<script>
    import appMixin from '../../appMixin';

    // demo data
    var dataArray = {
        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' }
                        ]
                    }
                ]
            }
        ]
    };

    export default {
        data: function () {
            return {
                header_title : 'Tasks',
                ...
                treeData:  dataArray
                ...
            }

        },

        mixins : [appMixin],

        created() {
        },

        mounted() {
            this.loadTasksList()
        }, // mounted() {

        methods: {

            
        }
    }
</script>


<style scoped lang="css">
.item {
   cursor: pointer;
}
.bold {
   font-weight: bold;
}
ul {
   padding-left: 1em;
   line-height: 1.5em;
   list-style-type: dot;
}
</style>

And in console of my browser I see error :

Vue warn]: Property or method "model" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <TasksIndex> at resources/assets/js/components/tasks/TasksIndex.vue
 "TypeError: Cannot read property 'name' of undefined"
found in
---> <TasksIndex> at resources/assets/js/components/tasks/TasksIndex.vue
       <Root>

What I did not understabd in which part of my pages have I to wrote code

<script type="text/x-template" id="item-template">
...
</script>

code block?

Looks like all data is not visible within this block of code.

Which layout for such template must be valid in this case?

Thanks!

v-for="model in model.children" requires you have a property named model in either your data or computed property of your viewmodel. You probably meant to go v-for="model in treeData.children. — connexo
– connexo, Commented Jan 19, 2018 at 9:17

score 1 · Accepted Answer · 2018-01-19 09:27:04Z

1

You need to add model to your data or a prop.

In data it would look like this:

data: function () {
        return {
            model: {
                name: 'foo',
                ....
                children: []
            }
            header_title : 'Tasks',
            ...
            treeData:  dataArray
            ...
        }

    },

@connexo is probably correct in that you are likely needing to loop model.treeData

edited Jan 19, 2018 at 9:27

answered Jan 19, 2018 at 9:21

user320487

Sign up to request clarification or add additional context in comments.

Comments

connexo · Accepted Answer · 2018-01-19 11:45:25Z

0

v-for="model in model.children" requires you have a property named model in either your data or computed property of your viewmodel that is using v-for in its template.

You probably meant to go

v-for="model in treeData.children"

Edit:

Of course you also need to adjust your :model prop:

<item
    class="item"
    v-for="model in treeData.children"
    :model="treeData">
</item>

edited Jan 19, 2018 at 11:45

answered Jan 19, 2018 at 9:24

connexo

57.2k15 gold badges112 silver badges149 bronze badges

3 Comments

user2339232 Over a year ago

I have tried this way : v-for="model in treeData.children" But got error... Can be other reason of the error?

connexo Over a year ago

Your information is not very helpful without the error message.

user2339232 Over a year ago

I gave in top message : "Vue warn]: Property or method "model" is..."

Collectives™ on Stack Overflow

How to implement tree-view example properly

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related