0

我制作了应用程序，我想根据客户 ID 更改 v-data-table 的状态。所以我在下面做了我的样本。但没有显示任何状态信息。我使用 axios 来获取 RestAPI。当来自 RestAPI 的 id 为 1 或 3 时，在数据表中显示“超级客户”。有人建议我吗？

我的样品

    <template>
  <v-app>
    <v-data-table 
     dense 
     :headers="headers" 
     :items="items" 
     class="elevation-1">
      <template v-slot:items="{items}">
        <tbody>
          <tr v-for="item in items" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.email}}</td>
            <td>{{item.name}}</td>
            <td>{{item.status}}</td>
          </tr>
        </tbody>
      </template>
      </v-data-table>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import axios from 'axios'

@Component
export default class AxiosPractice extends Vue {
  items: any=[]
  status:string=''

  headers = [
    { text: 'id', value: 'id' },
    { text: 'name', value: 'name' },
    { text: 'email', value: 'email' },
    { text: 'status', value: 'status' }
  ];
  async mounted() {
    const response = await axios.get(
      'https://jsonplaceholder.typicode.com/posts/1/comments'
    );
    this.items = response.data.map((item:any) => {
      const newStatus =
        item.id === '1' || item.id === '3' ? 'supercustomer' : '';
      return {
        id: item.id,
        email: item.email,
        name: item.name,
        status: newStatus
      };
 });
    if(this.items.id = '1' || '3'){
      return this.status = 'supercustomer'
    }
  }
}
</script>
4

1 回答 1

3

如何显示状态：

  1. Status必须是 的一部分item，否则所有项目的状态都将相同。所以<td>{{status}}</td>改为<td>{{item.status}}</td>. 并更改{ text: 'status', value: '' }为{ text: "status", value: "status" }.
  2. this.items.id无效，因为this.items它是一个数组。
  3. 此外，当您检查一个值是否等于一个字符串时，您应该使用===，这意味着相等的值和相等的类型。在此处查看有关比较的更多信息：https ://www.w3schools.com/js/js_comparisons.asp

我要做的是status在映射项目时添加：

this.items = response.data.map(item => {
      const newStatus =
        item.id === '1' || item.id === '3' ? 'supercustomer' : '';
      return {
        id: item.id,
        email: item.email,
        name: item.name,
        status: newStatus
      };
 });
于 2020-08-21T05:46:33.010 回答