Vue.js:更新db中的子json数据格式

<template>
  <div>
    <div v-for="item in jsonData" :key="item.id">
      <span>{{ item.name }}</span>
      <button @click="updateData(item.id)">Update</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      jsonData: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/data') // 假设接口地址为/api/data
        .then(response => {
          this.jsonData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    updateData(id) {
      // 根据id更新数据库中的子JSON数据格式
      // 可以通过axios.post或axios.put等方法发送HTTP请求
      // 示例中使用console.log来模拟更新操作
      console.log(`Update data with id ${id}`);
    },
  },
};
</script>