Vuejs 计算数组

Question

i have an array of Account Status like this ["AS", "AS"] and i have a table like this [![enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/2EiPn.png

i need to add the Account Status in this table with other fields as shown below

this is my code

`   <template slot="thead" >
              <!-- <vs-th>Image</vs-th> -->
              <vs-th sort-key="First Name">First Name</vs-th>
              <vs-th sort-key="Last Name">Last Name</vs-th>
              <vs-th sort-key="Phone Number">Phone Number</vs-th>
              <vs-th sort-key="Account Status">Account Status</vs-th>
              <vs-th sort-key="User Balance">User Balance</vs-th>
              <vs-th>Action</vs-th>
            </template>

            <template slot-scope="{ data }">
              <tbody>
                <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >

                  <!-- <vs-td class="img-container">
              <img :src=" baseURL + tr.ImagePathUrl" class="product-img"  v-if="tr.ImagePathUrl != null"/>
              <img :src=" defaultUrl" class="product-img"  v-else/>
            </vs-td> -->
                  <vs-td>
                    <p class="product-name font-medium truncate">
                      {{ tr.firstName }}
                    </p>
                  </vs-td>
                  <vs-td>
                    <p class="product-category">{{ tr.lastName }}</p>
                  </vs-td>
                  <vs-td>
                    <p class="product-category">{{ tr.PhoneNumber }}</p>
                  </vs-td>

                  <vs-td >

                    <vs-chip class="product-order-status" >  ACCOUNT STATUS </vs-chip>
                  </vs-td>

                  <vs-td>
                    <p class="product-category">
                      {{ tr.UserBalance | numFormat("###,##0.00") }}
                    </p>
                  </vs-td>

                  <vs-td class="whitespace-no-wrap">
                    <!-- <router-link :to="{name: 'Client-add/Edit', params: { data:{ Id: tr.Id , CountryCode: tr.CountryCode ,PhoneNumber: tr.PhoneNumber}}}" svgClasses="w-5 h-5 hover:text-primary stroke-current">
                    <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" style="padding:2px" />
                </router-link> -->

                    <router-link
                      :to="{ name: 'ClientProfile', params: { Id: tr.Id } }"
                    >
                      <feather-icon
                        icon="UserIcon"
                        svgClasses="w-5 h-5 hover:text-primary stroke-current"
                        style="padding:2px"
                      />
                    </router-link>
                  </vs-td>
                </vs-tr>
              </tbody>
            </template>

this is my computed method to get Accounts List


    computed: {

    KeyToValAccountStatus(){
      debugger
          this.ListAccountStatus();

       return this.AccountStatus
      },

`

AccountStatus return the array of accounts status i need to print them in there place in the table
i tried to put my computed in the table and it print all values in each field in the table

Answer 1

使用数据和方法，如果变量不用于交互，则不要使用计算（按钮禁用，简单计算）