A problem with vue rendering data

div v-for="(item,i) in dataList" :key="i" class="wrapper">
    <div class="top-title" :id="item.id">
        <div class="name">{{item.product}}</div>
        <div class="num">{{item.status}}</div>
      </div>
      </div>

item.status is the status code obtained from the backend. For example, if status is 10, I want to change it to the text "success" and return to 20, and I want to change it to the text "failure". I can render a judgment with JQ, but how should I achieve this kind of page rendering?
have thought about using ref to obtain the rendered status code, and then judge it through the method, but there is still a problem in implementation. Please give us your advice

.
Apr.21,2021

  1. pass method
methods: {
    filter(key) {
        return status[key]
    }
}

//
<div class="num">{{filter(item.status)}}</div>
  1. or traverse the data and reassign a new field to represent the status
  2. place a status in the data
//
<div class="num">{{status[item.status]}}</div>

use a filter to judge that the status code returns the corresponding content, or calculate the attribute


methods to define a method. The return value of the status code is the corresponding text. It should also be possible to rely on filter.


{{item.status === 10 ? '' : ''}}
Menu