列表中的Vue2 Laravel组件

Question

我正在构建一个 Laravel 应用程序并尝试使用 vue.js（没有取得多大成功！）。我不了解组件使用 ajax 数据的方式。我发现的几乎所有显示此功能的示例都在应用程序级别定义组件的数据，而不是组件级别。

我试图在组件本身中动态定义我的数据，并且总是得到Property or method tasks is not defined on the instance but referenced during render 的错误。这是组件，它只是调用端点来拉取基本的“待办事项”任务：

Vue.component('tasks', {
    data: function() {
        return {
            tasks: []
        }
    },
    mounted() {
        this.getTasks();
    },
    methods: {
        getTasks() {
            axios.get('/tasks').then(function (response) {
                this.tasks = response.data;
                console.dir(this.tasks);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },
    template: `
            <div class="card">
                <div class="card-title">{{ task.name }}</div>
                <div class="card-body">
                    <div class="service-desc">{{ task.description }}</div>
                    <div class="task-notes"><input class="form-control" v-model="task.notes" placeholder="Notes"></div>
                    <div class="task-active"><input type="checkbox" checked data-toggle="toggle" data-size="sm" v-model="task.active" v-on:click="$emit('disable')"></div>
                </div>
            </div>
  `
});

从刀片模板中调用组件：

<tasks v-for="task in tasks" :key="task.id"></tasks>

tasks 是在data 函数中声明的，所以我不知道为什么 vue 告诉我它没有定义？

Answer 1

当您在组件上定义数据属性时，它仅在该组件及其模板中可用。您的 v-for 指令在父范围内（即在定义 tasks 的组件之外）。

这里最简单的解决方案可能是将容器元素移动到组件内部，并在那里迭代任务：

<div>
  <div class="card" v-for="task in tasks" :key="task.id">
    <div class="card-title">{{ task.name }}</div>
    <div class="card-body">
      <div class="service-desc">{{ task.description }}</div>
      <div class="task-notes"><input class="form-control" v-model="task.notes" placeholder="Notes"></div>
      <div class="task-active"><input type="checkbox" checked data-toggle="toggle" data-size="sm" v-model="task.active" v-on:click="$emit('disable')"></div>
    </div>
  </div>
</div>

注意：您不能将 v- 用于模板的根元素，这就是为什么要将容器元素移动到模板中的原因。

另一种方法是将其分为两个组件（例如TaskList 和TaskItem），其中父组件负责从 API 获取任务。子组件可以只接收单个任务作为道具并将其呈现给 UI。

任务列表

Vue.component('task-list', {
    data: function() {
        return {
            tasks: []
        }
    },
    mounted() {
        this.getTasks();
    },
    methods: {
        getTasks() {
            axios.get('/tasks').then(response => {
                this.tasks = response.data;
                console.dir(this.tasks);
            })
            .catch(error => {
                console.log(error);
            });
        }
    },
    template: `
            <div class="container">
                <task-item
                    v-for="task in tasks"
                    :key="task.id"
                    :task="task"
                />
            </div>
  `
});

任务项

Vue.component('tasks', {
    props: {
        task: {
            required: true
        }
    },
    template: `
            <div class="card">
                <div class="card-title">{{ task.name }}</div>
                <div class="card-body">
                    <div class="service-desc">{{ task.description }}</div>
                    <div class="task-notes"><input class="form-control" v-model="task.notes" placeholder="Notes"></div>
                    <div class="task-active"><input type="checkbox" checked data-toggle="toggle" data-size="sm" v-model="task.active" v-on:click="$emit('disable')"></div>
                </div>
            </div>
  `
});

这样做的好处是它更好地分离了组件的职责。您可以向 TaskList 组件添加逻辑来处理显示加载微调器和/或 API 调用的错误消息，而 TaskItem 只需要关注显示单个任务。