Question

我尝试从这个https://vuejs.org/v2/examples/tree-view.html示例实现树视图到我的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>

代码块？

看起来在这段代码中看不到所有数据。

在这种情况下，此类模板的哪种布局必须有效？

谢谢！

Answer 1

您需要为数据或道具添加模型。

在数据中它看起来像这样：

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

    },

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

Answer 2

v-for="model in model.children"要求您的视图模型的model或data属性中包含名为computed的属性，该属性在其模板中使用v-for。< / p>

你可能打算去

v-for="model in treeData.children"

编辑：

当然，您还需要调整:model道具：

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

Answer 3

是的，我在resources / assets / js / components / tasks / TasksIndex.vue文件的数据块中添加了模型和开放定义。

但在那之后我得到了错误：

Cannot find element: #item-template
warn @ app.js?dt=1516598357:6765
... 
[Vue warn]: Template element not found or is empty: #item-template

found in

---> <Item>
       <TasksIndex> at resources/assets/js/components/tasks/TasksIndex.vue
         <Root>

我在resources / assets / js / components / tasks / TasksIndex.vue中添加了定义：

export default {
    components:{item},
    data: function () {
    ...

之后我收到错误：

Uncaught ReferenceError: item is not defined
    at Object.render (app.js?dt=1516598547:sourcemap:126599)
    at __webpack_require__ (app.js?dt=1516598547:sourcemap:20)
    at Object.<anonymous> (app.js?dt=1516598547:sourcemap:126443)
    at __webpack_require__ (app.js?dt=1516598547:sourcemap:20)
    at Object.<anonymous> (app.js?dt=1516598547:sourcemap:5239)
    at __webpack_require__ (app.js?dt=1516598547:sourcemap:20)
    at Object.defineProperty.value (app.js?dt=1516598547:sourcemap:74351)
    at __webpack_require__ (app.js?dt=1516598547:sourcemap:20)
    at app.js?dt=1516598547:sourcemap:63
    at app.js?dt=1516598547:sourcemap:66
    ...

错误是什么以及如何解决？

如何正确实现树视图示例

3 个答案: