不同状态下如何改变v-badge的颜色？

Posted 2023-02-16

【中文标题】不同状态下如何改变v-badge的颜色？

【英文标题】：How to change the color of v-badge in different status?

【发布时间】：2021-07-11 02:16:08

【问题描述】：

我是 Vue.js 的新手。如何将 vuetify 中的徽章更改为不同颜色？我希望“in”状态的徽章显示为绿色，“新鲜”状态显示为黄色，“等待”状态显示为灰色。

https://codepen.io/magooo/pen/wvgjLRb

  name: "Frozen Yogurt",
  calories: 159,
  status: "in", // color yellow
,

  name: "Ice cream sandwich",
  calories: 237,
  status: "fresh", // color green
,

  name: "Eclair",
  calories: 262,
  status: "fresh", // color green
,

  name: "Cupcake",
  calories: 305,
  status: "wait", // color grey

【问题讨论】：

@kissu 非常感谢！但是是否可以在 vue 中使用“watch”通过字符串（例如，in、fresh、wait）来区分颜色，而不是在 types 数组中添加颜色属性？在此先感谢:)

您可以在状态和颜色之间进行映射，是的，但它需要更多代码，不会那么“干净”（因为您使用的是 vuetify 并且它在那里是这样连接的）和性能也会降低。在数组中添加这样的属性有什么问题？

【参考方案1】：

托管解决方案：https://codepen.io/kissu-the-styleful/pen/MWJXBJM?editors=1010

以下是实现它的方法

<template>
  <div id="app">
    <v-app id="inspire">
      <div>
        <v-data-table
          :headers="headers"
          :items="types"
          class="elevation-0 mx-10 my-10"
          :hide-default-footer="true"
        >
          <template #[`body`]=" items ">
            <tbody>
              <tr v-for="item in items" :key="item.name">
                <td> item.name </td>
                <td> item.calories </td>
                <td>
                  <v-badge bordered bottom :color="item.color" dot offset-x="10" offset-y="10"></v-badge>
                   item.status 
                </td>
              </tr>
            </tbody>
          </template>
        </v-data-table>
      </div>
    </v-app>
  </div>
</template>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data () 
    return 
      headers: [
         text: "name", value: "name" ,
         text: "calories", value: "calories" ,
         text: "status", value: "status" ,
      ],
      types: [
        
          name: "Frozen Yogurt",
          calories: 159,
          status: "in",
          color: "yellow",
        ,
        
          name: "Ice cream sandwich",
          calories: 237,
          status: "fresh",
          color: "green",
        ,
        
          name: "Eclair",
          calories: 262,
          status: "fresh",
          color: "green",
        ,
        
          name: "Cupcake",
          calories: 305,
          status: "wait",
          color: "blue-grey",
        
      ]
    ;
  ,
)

基本上使:color="item.color" 动态取决于types 对象。

PS：:color是v-bind:color的简写