Vuejs 计算数组答案

【问题标题】：Vuejs Computed ArrayVuejs 计算数组
【发布时间】：2020-03-25 21:41:18
【问题描述】：

我有一个这样的帐户状态数组 ["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 返回账户状态数组我需要将它们打印在表格的那里
我试图将我的计算结果放入表中，并打印表中每个字段中的所有值

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

【讨论】：