Laravel 如何正确实现树视图示例

我尝试从这个示例中实现树视图 到我的laravel 5.5/vue.js应用程序。 在resources/assets/js/app.js中，我添加了行：

// 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);

在我的列表文件resources/assets/js/components/tasks/TasksIndex.vue中 我添加项模板声明并调用项的根元素：

<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>

在浏览器的控制台中，我看到错误：

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://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>

我不明白的是，我需要在我的页面的哪一部分编写代码

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

代码块

看起来此代码块中的所有数据都不可见

在这种情况下，该模板的哪个布局必须有效

---

谢谢

您需要将模型添加到数据或道具中

在数据中，它将如下所示：

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

    },

@connexo可能是正确的，因为您可能需要在model.children中循环model.treeData

v-for=model。children要求您在其模板中使用v-for的viewmodel的数据或计算属性中具有名为model的属性

你可能是想去的

v-for="model in treeData.children"

编辑：

当然，您还需要调整：模型道具：

---

model.children中的v-for=model要求在viewmodel的数据或计算属性中具有名为model的属性。您可能打算在treeData.children中使用v-for=model。我尝试过这种方法：在treeData.children中使用v-for=model，但出现了错误。。。可能是错误的其他原因吗？如果没有错误消息，您的信息将不会有很大帮助。我在顶部消息中给出了：Vue warn]：属性或方法模型是。。。

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