Блог

Я создал приложения и хотел изменить статус v-data-table в зависимости от идентификатора клиента. Итак, я сделал свой пример ниже. но какая-либо информация о состоянии не отображалась. Я использовал axios для получения RestAPI. Когда идентификатор из RestAPI равен 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>
  

Как отобразить статус:

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
      };
 });