在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢？

Question

在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢？

根据不同的文字状态，页面上给出不同的图片

我是这样写的

<li class="clearfix" v-for="(item,key) in myData">

    <router-link :to="{path:'/home_details?id='+item.id+'&logDate='+item.status}">

        <div>{{item.name}}</div>

        <div class="list_right">

            <img :src="statusimage"/>

            <span v-bind:style="{'color':color(item)}">{{item.status}}</span>

        </div>

    </router-link>

</li>

color(col){

//    if(col.status=="已完成") return "#FFD700"

//  if(col.status=="执行中") return "green"

//  if(col.status=="待执行") return "gray"

//  return "black"

    if(col.status=="已完成"){

        return this.statusimage="../assets/img6.png"

    }

    if(col.status=="执行中"){

        return this.statusimage="../assets/image7.png"

    }

    if(col.status=="待执行"){

        return this.statusimage="../assets/image5.png"

    }    

},

不同的文字颜色不同是可以实现的，为什么不同的图片不行呢？ 页面报错

这是为什么呢 怎么写呢？

根据不同的文字渲染不同的图片

Answer 1

有个死循环。你的return&nbsp;this.statusimage="../assets/image5.png"；可以只写this.statusimage="../assets/image5.png"或者只写return&nbsp;"../assets/image5.png"建议颜色和图片分开写，你里面的return this.statusimage中间 this 绑定的对象不明确，有可能就是这里进入了循环。剩下如果还不行，就要看到底哪里进入死循环了，要看代码逻辑，你这里给出的不够。

Answer 2

vue的数据绑定，this.statusimage重新赋值之后就会更改，不需要再用return了 感觉是这个问题 你再看看

Answer 3

有可能是图片路径的原因，所以建议可以用class直接改，把图片写成背景图

Answer 4

这个最后怎么解决的？遇到同样的问题，求答案。我是直接用方法的，但是浏览器报找不到图片<img v-bind:src="srcValue(item.ExecStatus)"/>srcValue: function (status) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(status==2)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '/Image/OK.png'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(status==3)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '/Image/Error.png'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(status==1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '/Image/waiting.png'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '/Image/waiting.png'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp;