列表中的 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 获取任务。子组件可以只接收一个任务作为 prop 并将其呈现给 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只需要关心显示单个任务。