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 function 中声明的，所以我不确定为什么 vue 告诉我它没有定义？

Answer 1

当您在组件上定义数据属性时，它仅在该组件及其模板中可用。 您的v-for指令位于父 scope 中（即在定义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只需要关注显示单个任务。