javascript - Modal的异步数据使用类绑定

Question

在 vue js 任务中，我尝试在 html modals 上实现标签颜色。标签上的颜色是class binding根据api中的数据做的。api 的值，将始终每 3000 毫秒更改一次。到目前为止，来自api本身的数据已经存储在一个变量中，变量的值根据api发生了变化，但标签的颜色没有改变。表格中按钮的颜色也基于来自 api 的数据。已成功跟随 的值变化color from data，但模态失败。这是我的代码：

<template>
<div v-if="showModal">
 <transition name="modal">
  <div class="close">
    <span @click="showModal=false"><i class="fa fa-times"></i></span>
  </div>
  <div v-for="check in device" class="row">                                        
    <label class="statusDevice" v-bind:class="check.color"></label>
    <h4 class="nameDevice col col-5">{{check.name}}</h4>                                                                            
    <label><h4>IP Address :</h4></label>
    <h4>{{check.ipAddress}}</h4>                                        
  </div>
 </transition>
</div>
<card>
  <table>
    <tbody>
      <tr>
         <td v-for="text in data"><button type="button" class="btn btn-lg btn-text" v-bind:class="text.color" @click="showDetail(text)">{{text.name}}</button></td>
      </tr>
    </tbody>
  </table>
</card>
</template>

<script>
export default {
name: "SampleApp",      
data(){
       return {
         showModal:false,
         device:[],
         data:[]
       }
    },
    methods:{
       showDetail(data){
        this.showModal=true;                                    
        this.device=data.device;                
       },
       getValue(){
         apiService.getListDevice().then((result) => {
            this.data = result.data;
        });      
       }
    },
    created(){
        this.getValue();
        setInterval(()=>this.getValue(),3000);
    }
 }
</script>

有人可以帮忙吗？？？我尝试过使用v-bind:class.sync="check.color"，但失败了。之前谢谢。

标签： javascripthtmlvuejs2