Как изменить отображение объектов не меня их во vue таблице?

Question

У меня есть условная таблица во vue (+vuetify). Как изменить вывод значений sogl: "null, true false" на "пусто, да, нет". Изменить именно отображение объектов в таблице? Данные объекты приходят с сервера.

  <v-data-table
    :headers="headers"
    :items="tableOne.memb"
    :items-per-page="5"
    item-key="id"
    class="elevation-1"
  >
  </v-data-table>

Массив с сервера

[ { "id": "1", "info": { "ban": "track", "numbers": "3223", "sogl": true }}, 
{ "id": "2", "info": { "ban": "track", "numbers": "12312", "sogl": true }} ,
{ "id": "3", "info": { "ban": "track", "numbers": "455", "sogl": null}} ,
{ "id": "4", "info": { "ban": "track", "numbers": "423", "sogl": true }}]

Скрипт

<script>
    data: () => ({
        headers: [
          {
            text: 'Номер',
            align: 'start',
            sortable: false,
            value: 'id',
          },
          { text: 'Блок',      value: 'info.ban' },
          { text: 'Номер',     value: 'info.numbers' },
          { text: 'Согласие',  value: 'info.sogl' },
        ],

    }),


  }
</script>

Answer 1

Необходимо использовать v-slot:item="props".

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      tableRowsSelected: [],
      headers: [{
          text: 'Номер',
          align: 'center',
          sortable: false,
          value: 'id',
        },
        {
          text: 'Блок',
          value: 'info.ban'
        },
        {
          text: 'Номер',
          value: 'info.numbers'
        },
        {
          text: 'Согласие',
          value: 'info.sogl'
        },
      ],
      items: [{
          "id": "1",
          "info": {
            "ban": "track",
            "numbers": "3223",
            "sogl": false
          }
        },
        {
          "id": "2",
          "info": {
            "ban": "track",
            "numbers": "12312",
            "sogl": true
          }
        },
        {
          "id": "3",
          "info": {
            "ban": "track",
            "numbers": "455",
            "sogl": null
          }
        },
        {
          "id": "4",
          "info": {
            "ban": "track",
            "numbers": "423",
            "sogl": true
          }
        }
      ]
    }
  },
  methods:{
    convertSogl(val) {
      if (val) {
        return 'Да';
      } else if (val === false) {
        return 'Нет';
      } else {
        return 'Пусто';
      }
    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <template>
    <v-data-table
      :headers="headers"
      :items="items"
      :items-per-page="5"
      item-key="id"
      class="elevation-1"
    >
      <template
        v-slot:item="props"
      >
        <tr>
          <td>{{ props.item.id }}</td>
          <td>{{ props.item.info.ban }}</td>
          <td>{{ props.item.info.numbers }}</td>
          <td>{{ convertSogl(props.item.info.sogl) }}</td>
        </tr>
      </template>
    </v-data-table>
  </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

БЛОГ НА HUSL

Как изменить отображение объектов не меня их во vue таблице?

Ответы (1 шт):