如何使用API调用的响应来响应Vue列表组的特定列表项？

import axios from 'axios';

export default {
  data() {
    return {
      items: []  // 用于存储API响应的列表数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/items')  // 替换为你的API地址
        .then(response => {
          this.items = response.data;  // 将API响应的数据赋值给列表数据
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.description }}
        <button @click="updateItem(index)">更新</button>
      </li>
    </ul>
  </div>
</template>

export default {
  // ...
  methods: {
    // ...
    updateItem(index) {
      const itemId = this.items[index].id;  // 假设列表项有唯一的id属性
      const updatedData = { /* 更新的数据 */ };
      
      axios.put(`https://api.example.com/items/${itemId}`, updatedData)  // 替换为你的API地址
        .then(response => {
          // 处理更新成功后的响应
          console.log('更新成功！');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};