Vuejs Вычисляемый массив

Question

У меня есть массив состояния учетной записи, подобный этому ["AS", "AS"], и у меня есть таблица, подобная этой [! [Введите описание изображения здесь] [1]] [1]

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

мне нужно добавить статус учетной записи в этой таблице с другими полями, как показано ниже

это мой код

`   <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 возвращает массив статусов счетов, которые мне нужно распечатать в есть место в таблице
я попытался положить мои вычисленные в таблицу, и он напечатает все значения в каждом поле в таблице

Answer 1

использовать данные и методы, не использовать computed, если переменная не используется для интерактивности (кнопка отключена, простые вычисления)