Laravel5.5+Vue.js实现树形视图报错：model未定义求助

嘿，我来帮你搞定这个Vue树形视图的问题！咱们一步步来解决模板布局和报错的问题：

x-template是依赖真实DOM节点的模板，不能放在Vue单文件组件（.vue）的<template>标签里，得放在Laravel的Blade视图文件中，有两个推荐位置：

• 对应页面的Blade文件：比如你用的resources/views/tasks/index.blade.php，把x-template放在@section('content')里，Vue挂载容器（比如#app）的内部或外部都可以，只要保证Vue初始化时能读到这个DOM节点就行。
• 全局布局文件：如果这个树形组件要在多个页面用，也可以放在resources/views/layouts/app.blade.php的</body>标签前，这样所有页面都能访问到模板。

举个Blade里的示例：

@extends('layouts.app')

@section('content')
  <div id="app">
    <tasks-index></tasks-index>
  </div>

  <!-- 这里放你的x-template -->
  <script type="text/x-template" id="item-template">
    <li>
      <div
        :class="{ bold: isFolder }"
        @click="toggle"
        @dblclick="changeType"
      >
        {{ model.name }}
        <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
      </div>
      <ul v-show="isOpen" v-if="isFolder">
        <item
          v-for="(child, index) in model.children"
          :key="index"
          :model="child"
        ></item>
        <li @click="addChild">+</li>
      </ul>
    </li>
  </script>
@endsection

你遇到的"model is not defined"和"Cannot read property 'name' of undefined"，核心原因是组件没正确接收props，也没传递合法数据：

1. 全局注册组件时必须声明props
   在resources/assets/js/app.js里注册组件时，要明确声明接收model这个属性，不然模板里的model.name找不到来源：

Vue.component('item', {
  template: '#item-template',
  props: ['model'], // 必须加这行！声明接收model prop
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    isFolder() {
      return this.model.children && this.model.children.length > 0
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen
      }
    },
    changeType() {
      if (!this.isFolder) {
        this.$set(this.model, 'children', [])
        this.addChild()
        this.isOpen = true
      }
    },
    addChild() {
      this.model.children.push({ name: 'New Item' })
    }
  }
})

2. 根组件要传递合法的树形数据
   在TasksIndex.vue里，你需要定义树形结构的data，并且通过v-bind（简写:）把数据传递给<item>组件：

<template>
  <div class="tasks-index">
    <!-- 用:model传递数据，不能直接写model="treeData" -->
    <ul>
      <item :model="treeData"></item>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义合法的树形数据，每个节点要有name，文件夹要有children数组
      treeData: {
        name: 'Root Folder',
        children: [
          { name: 'File 1' },
          { 
            name: 'Sub Folder', 
            children: [{ name: 'Sub File 1' }, { name: 'Sub File 2' }] 
          }
        ]
      }
    }
  }
}
</script>

• 确保x-template的id和组件注册时的template值完全一致（比如都是#item-template）
• 传递给model的数据必须是对象，且包含name属性，文件夹节点要有children数组
• 不要把x-template放在Vue单文件组件的<template>或<script>里，必须是Blade渲染出的真实DOM节点

内容的提问来源于stack exchange，提问作者user2339232