<tr v-for=任务中的任务"；:key="task.id"><td>{{ task.name }}</td><td>{{ task.duration }}</td><td>{{ task.created_at }}</td><td><router-link :to="{name: '', params: { id: task.id }}";class=btn btn-primary">检查</router-link><button class="btn btn-danger";@click.prevent="deleteTask(task.id)">Delete</button></td></tr></tbody></模板>
//这是脚本部分
我想立即查看数据，而无需更改页面或重新加载组件.
解决方案
我认为您在输入数据后再次丢失了获取数据.所以你可以这样做:
I can't see immediately the data that I've succesfully input to database.
I'm using vue.js in Laravel 5.8 framework, with axios, and vue-router tools.
This is my complete code in addTaskComponent.vue
<template>
<div class="container-fluid">
<h2 style="text-align:center">Add New Task</h2>
<form @submit.prevent="addTask" style="text-align:center" class="justify-content-center">
<div v-if="success" class="alert alert-success">Tersimpan</div>
<div class="row justify-content-center">
<div class="col-4">
<input
placeholder="Enter Task Name"
type="text"
class="form-control"
required
oninvalid="this.setCustomValidity('data tidak boleh kosong')"
oninput="setCustomValidity('')"
v-model="task.name"
/>
<span class="text text-danger">{{ error(errors.name) }}</span>
</div>
<div class="col-4">
<input
placeholder="Enter Duration of Task (hour)"
type="text"
class="form-control"
v-model="task.duration"
/>
<span class="text text-danger">{{ error(errors.duration) }}</span>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Add Task</button>
</div>
</div>
</form>
// this is the section for showing the data
<h2 style="text-align:center">List of Task</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Nama Tugas</th>
<th>Durasi</th>
<th>Ditambahkan Pada</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="task in tasks" :key="task.id">
<td>{{ task.name }}</td>
<td>{{ task.duration }}</td>
<td>{{ task.created_at }}</td>
<td>
<router-link :to="{name: '', params: { id: task.id }}" class="btn btn-primary">Check</router-link>
<button class="btn btn-danger" @click.prevent="deleteTask(task.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
// and this is the script section
<script>
export default {
data() {
return {
success: false,
task: {},
tasks: [],
errors: []
};
},
created() {
let uri = `/api/tasks`;
this.axios.get(uri).then(response => {
this.tasks = response.data.data;
});
},
methods: {
addTask() {
let uri = `/api/tasks`;
this.axios
.post(uri, this.task)
.then(response => {
this.success = response.data.success;
})
.catch(error => {
if (error.response.status == 422) {
this.errors = error.response.data.errors;
}
});
},
error(field) {
return _.head(field);
},
deleteTask(id) {
let uri = `/api/tasks/${id}`;
this.axios.delete(uri).then(response => {
this.success = response.data.success;
});
}
}
};
</script>
I want to see the data immediately without changing page or component reload.
解决方案
I think you are missing fetching the data again after you input it.
so you can do it like this:
<script>
export default {
data() {
return {
success: false,
task: {},
tasks: [],
errors: []
};
},
created() {
this.fetchTasks()
},
methods: {
fetchTasks() {
let uri = `/api/tasks`;
this.axios.get(uri).then(response => {
this.tasks = response.data.data;
});
},
addTask() {
let uri = `/api/tasks`;
this.axios
.post(uri, this.task)
.then(response => {
this.success = response.data.success;
this.fetchTasks() // you need to call your api again, here, to fetch the latest results after successfully adding a new task
})
.catch(error => {
if (error.response.status == 422) {
this.errors = error.response.data.errors;
}
});
},
error(field) {
return _.head(field);
},
deleteTask(id) {
let uri = `/api/tasks/${id}`;
this.axios.delete(uri).then(response => {
this.success = response.data.success;
});
}
}
};
</script>
这篇关于如何使用 vue.js laravel 在不刷新的情况下自动显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
