#javascript #css #vue.js #axios
#javascript #css #vue.js #axios
Вопрос:
У меня есть небольшое приложение, над которым я работаю, чтобы изучить VUE и Axios. Я застрял на части обновления. Я пытаюсь передать идентификатор форме для обновления, но не могу понять это вообще. Удаление работает так, как ожидалось. Автоматическое создание загружается, как и ожидалось, и создание задач работает идеально. Я просмотрел несколько видеороликов о том, как на самом деле реализовать обновление с помощью VUE, но просто не могу его получить. Попытался просмотреть несколько видео и обратился с запросом сюда . Я довольно новичок в программировании, поэтому, если я задаю глупый вопрос, я заранее извиняюсь.
<div class="container-fluid">
<div class="row">
<nav class="navbar col-12 navbar-light bg-light">
<a class="navbar-brand" href="#">
Sam's Application
</a>
</nav>
</div>
<div
id="welcome-content"
class="pb-5 pt-5 row d-flex justify-content-center align-items-center flex-column"
>
<div
class="col-4 p-4 d-flex justify-content-center align-items-center flex-column"
>
<h1 class="text-success">Welcome to Sam's ToDo App!</h1>
<p>
This apps allows you to create tasks, delete, and make modifications.
Come back later for more features. If you would like to see more,
please send us a message!
</p>
</div>
</div>
<section class="pt-5 w-75 row mx-auto pt-">
<div class="col-4 align-items-center">
<form class="p-4" id="form" @submit.prevent>
<strong class="text-danger " v-if="edit"
>Please make Changes and click Update</strong
>
<div class="row mt-3">
<div class="col-12">
<input
class="form-control"
type="text"
v-model="currentTask.name"
v-if="edit"
/>
<input
class="form-control"
type="text"
v-model="form.name"
placeholder="Task Title"
v-else
/>
</div>
<div class="col">
<input
class="mt-4 form-control"
type="text"
v-model="currentTask.description"
v-if="edit"
/><input
class="mt-4 form-control"
type="text"
v-model="form.description"
placeholder="Task Description"
v-else
/>
</div>
</div>
<button
type="button"
class="mt-4 btn btn-warning"
v-if="edit"
@click="updateTasks()"
>
Update
</button>
<button
type="button"
class="mt-4 ml-3 btn btn-secondary"
v-if="edit"
@click="edit = false"
>
Cancel
</button>
<button
type="button"
class="mt-4 btn btn-primary"
v-else
@click="createTasks"
>
Create New Task
</button>
</form>
</div>
<div class="col-8 d-flex justify-content-center ">
<table class="table table-striped ">
<tr class="d-flex pl-5">
<td class="col-4"><strong>Title</strong></td>
<td class="col-4"><strong>Description</strong></td>
<td class="col-1"></td>
<td class="col-1"></td>
</tr>
<tr class="d-flex pl-5" :key="id" v-for="(tasks, id) of tasks">
<td class="col-4" v-bind:key="tasks.id">
{{ `${tasks.name}` }}
</td>
<td class="col-4">
{{ `${tasks.description}` }}
</td>
<td class="col-1">
<button
type="button"
class="btn btn-danger"
@click="deleteTasks(tasks.id)"
>
Delete
</button>
</td>
<td></td>
<td class="col-1">
<button
class="btn btn-warning"
@click="
edit = true;
getCurrentTask(tasks.id);
"
>
Edit
</button>
</td>
</tr>
</table>
</div>
</section>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
id: ``,
tasks: [],
form: {},
name: "",
description: "",
route: "/api/tasks/",
edit: false,
currentTask: {},
};
},
mounted: function() {
this.getTasks();
},
methods: {
getTasks() {
axios
.get(this.route)
.then(({ data }) => {
this.tasks = [...data];
})
.catch((e) => {
console.log(e);
});
},
getCurrentTask(id) {
this.currentTask = id;
},
createTasks() {
axios
.post(this.route, this.form)
.then(() => {
this.getTasks();
this.form = {};
})
.catch((e) => {
console.log(e);
});
},
deleteTasks(id) {
axios
.delete(this.route id)
.then((result) => {
console.log(result);
this.getTasks();
this.form = {};
})
.catch((e) => {
console.log(e);
});
},
updateTasks(id) {
axios
.put(this.route id, this.currentTask)
.then((result) => {
console.log(result);
this.getTasks();
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style>
.container-fluid {
background-image: url(https://cdn.wallpapersafari.com/64/26/fDOZxE.png);
background-size: cover;
height: 100vh;
}
#form {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
background-color: white;
border-radius: 7px;
}
table {
background-color: white;
border-radius: 7px;
}
#welcome-content {
color: white;
}
</style>
Ответ №1:
Я создаю ту же страницу на vue, спасибо за помощь.
<template>
<div id="content">
<h1>...</h1>
<div>
<label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName" />
</div>
<div>
<label>Desciription</label> : <input type="text" id="txt2" v-model="model.descrption" />
</div>
<div>
<button type="button" v-on:click="saveClick">Save</button>
</div>
</div>
<hr />
<hr />
<h1>...</h1>
<table border="1" style="margin:auto">
<thead>
<tr>
<th style="width: 100px">ID</th>
<th style="width: 100px">Product Name</th>
<th style="width: 100px">Desciription</th>
<th style="width: 100px"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in model.list" v-bind:key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.productName }}</td>
<td>{{ item.descrption }}</td>
<td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
</tr>
</tbody>
</table>
</template>
<script>
import axios from "axios";
export default {
name: "Product",
data: function () {
return {
model: {
productName: "",
descrption: "",
},
list: [],
};
},
methods: {
saveClick() {
axios
.post("http://example.com", this.model)
.then((resp) => {
this.getList();
alert("success" resp.data.id);
});
},
getList() {
axios.get("http://example.com").then((resp) => {
this.model.list = resp.data;
});
},
deleteClick(id) {
axios.delete("http://example.com" id).then(() => {
this.getList();
alert("success");
});
}
},
mounted: function () {
this.getList();
},
};
</script> Ответ №2:
You might want to check you template and script
1. getCurrentTask() method only assigns the id. You might want to do this
2. In template
`<button class="btn btn-warning" @click="edit=true;getCurrentTask(task);">`
3. In script getCurrentTask(task) method
this.currentTask = task.id;
this.form.name=task.name;
this.form.description=task.description;
4. I would suggest modelling of data also something like instead of using currentTask and form as different obejcts
{
tasks: [],
form: {name:"",description:"",id:""},
route: "/api/tasks/",
edit: false,
}