将路线添加到v-cards中的Vuetify按钮？

<template>
  <v-card>
    <v-card-title>已添加的路线</v-card-title>
    <v-card-text>
      <v-list>
        <v-list-item v-for="route in addedRoutes" :key="route.id">
          <v-list-item-content>
            <v-list-item-title>{{ route.name }}</v-list-item-title>
            <v-list-item-subtitle>{{ route.description }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary" @click="addRoute">添加路线</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      addedRoutes: [] // 存储已添加的路线
    };
  },
  methods: {
    addRoute() {
      // 调用后端API或其他方式获取路线数据
      const newRoute = {
        id: 1,
        name: "路线名称",
        description: "路线描述"
      };
      // 将路线数据添加到已添加路线的数组中
      this.addedRoutes.push(newRoute);
    }
  }
};
</script>