使用form显示 JSON response 并存储回数据库

Question

请教各位大拿一个VUE 问题。
我用下面代码列出ToDo 内容。

<li v-for="task in tasklists">
        <ul>
            <li v-for="(value, key) in doc">{{ key }}: {{ value }}</li>
        </ul>
        <ul>
            <li><div class="button-update"  v-on:click="update">Update</div></li>
        </ul>   
    </li> 

JSON 内容 像这样

[ { "id": 1, "title": "todo title", "completed": false, "url": "http://localhost:5000/todo/classic/1" },
 { "id": 2, "title": "todo title 2", "completed": false, "url": "http://localhost:5000/todo/classic/2" }]

UI 显示像下面
id: 1
title: todo title
completed: false
url: http://localhost:5000/todo/classic/1
Update

我是想把“title” 的值做成可编辑， 然后点“Update”就可以存回数据库。

我的script现在是硬编码一个task (斜体字)， 可以存储回去。 我怎么才能把我上面ui内容做成一个Form,然后把form 实时内容读成JSON格式在存回数据库。 读了一些v-model 内容还是一头露水。

<script>
import axios from "axios";

export default {
 name: "Product",
 data() {
    return {
        content: null, 
                tasks: {}
    }
 },
 mounted () {
    axios
        .get('http://localhost:5000/todo/classic/')
        .then(response=>{this.content=response;this.tasks=response.data;} )
 },
 methods: { 
     update: function update() {
      // Simple POST request with a JSON body using axios
      const task= {
        "id": 51,
        "title": "Engine Polish",
        "completed": false,
        "url": "http://localhost:5000/todo/classic/51"
        };
      axios.patch("http://localhost:5000/todo/classic/51", task)
        .then(response => this.taskId = response.data.id);
    }
  } 
}
  </script>

大家时间宝贵， 给我个好的教程也可以。

谢谢

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要在Vue中实现这个功能，你需要为每个可编辑的项创建一个表单，并使用v-model进行双向数据绑定以实现实时更新。当点击更新按钮时，将更新后的数据发送到服务器。下面是一个简单的示例，说明如何实现这一点：

首先，我们需要为每个任务创建一个表单。我们可以使用v-for指令来遍历任务列表并为每个任务创建一个表单。然后，我们可以使用v-model指令来绑定表单中的值。以下是如何更新任务的title的示例：

HTML部分：

<div v-for="(task, index) in tasks" :key="index">
  <div>ID: {{ task.id }}</div>
  <input v-model="task.title" type="text" placeholder="Enter title">
  <div>Completed: {{ task.completed }}</div>
  <div>URL: {{ task.url }}</div>
  <button v-on:click="updateTask(task)">Update</button>
</div>

然后，在Vue实例的data函数中，我们需要为每个任务创建一个独立的对象以存储表单中的值：

data() {
  return {
    tasks: this.content.map(task => ({ ...task })) // 深拷贝任务列表以便可以修改副本而不会影响到原始数据
  }
}

接着，我们需要创建一个方法来更新任务。这个方法会在点击“Update”按钮时被调用，并发送一个包含新数据的PATCH请求到服务器：

methods: {
  async updateTask(task) {
    const response = await axios.patch(`http://localhost:5000/todo/classic/${task.id}`, task);
    // 如果更新成功，你可能想要更新本地存储的任务数据。在这里没有做这个操作，因为任务数据是响应式的，一旦更新，视图就会自动更新。但如果你需要更新本地存储的数据副本，你可以这样做：this.$set(this.tasks, index, response.data); 其中index是任务的索引。    
  }
}

关于v-model和双向数据绑定的理解，这是一个关键概念在Vue中。v-model指令实际上是语法糖，它简化了双向数据绑定。当你在表单元素中使用v-model指令时，Vue会自动为你在组件实例中添加一个与表单元素相同的属性（在你的例子中是title），并将这个属性的值与表单元素的值保持同步。这意味着你可以像访问普通的JavaScript属性一样访问这个值（如 this.title），并且可以更改这个属性的值以改变表单元素的值。这是一个实时过程，当你更改属性值时，视图会立即更新。同样地，当你更改表单元素的值时（例如通过用户输入），属性的值也会立即更新。这就是双向数据绑定的含义。它使得你的数据和视图保持同步。