在循环中包含Vuetify <v-badge />？

<template>
  <div>
    <v-badge v-for="item in items" :key="item.id" :color="getBadgeColor(item)">
      {{ item.text }}
    </v-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1', status: 'new' },
        { id: 2, text: 'Item 2', status: 'pending' },
        { id: 3, text: 'Item 3', status: 'completed' }
      ]
    };
  },
  methods: {
    getBadgeColor(item) {
      switch (item.status) {
        case 'new':
          return 'primary';
        case 'pending':
          return 'warning';
        case 'completed':
          return 'success';
        default:
          return 'default';
      }
    }
  }
};
</script>