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只需要關注顯示單個任務。