Как я могу добавить гиперссылки в столбец приложения моего компонента v-data-table?

Таблица данных загружается из базы данных, и у меня есть ссылки, а также название приложений. Я не хочу показывать ссылки, просто когда я нажимаю на имя приложения, оно должно открывать соответствующую ссылку.

    headers: [
      {
        text: 'Name',
        left: true,
        value: 'CustomerFullName',
      },
      { text: 'Application Name', value: 'ApplicationName' },
      { text: 'Country', value: 'CustomerCountryCode' },
      { text: 'Email Adress', value: 'CustomerEmailAddress' },
      { text: 'Status', value: 'NewStatus'},
      { text: 'CB Status', value: 'CBStatusID' },
      { text: 'Trial ending', value: 'FormattedTrialEndsAt' },
      { text: 'Next billing at', value: 'FormattedCBNextBillingAt'},
      { text: 'User Limit', value: 'UserLimit' },
      { text: 'QuickBooks', value: 'QBEnabled' },
      { text: 'Wizard', value: 'NewWizardStatus'}
    ],



    <td v-for = "(header, index) in headers" :key = "index"
        :class = "[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if = "header.value!==''">
      {{renderData(props.item, header)}}
    </td>

javascript vue.js datatable href vuetify.js

10.07.2019 12:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 713

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

<td v-for = "(header, index) in headers" :key = "index"
        :class = "[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if = "header.value!==''">
<a :href = "header.link">
      {{renderData(props.item, header)}}
</a>
    </td>

предполагая, что объект заголовка имеет атрибут ссылки.

Его еще нет, но даже если он есть, мне нужно как-то передать ему данные. Более того, я хочу иметь ссылку только в определенном столбце, а не во всех.

— 10.07.2019 12:32

10.07.2019 12:16

Вы можете передать тег шаблона для конкретного имени заголовка (имени столбца).

<v-data-table
          :headers = "headers"
          class = "elevation-1">
  <template v-slot:item.data.dataName = "{ item }">
    <a :href = "'mydata/'+ item.data.dataId" target = "_blank">
      {{ item.data.dataName }}
    </a>
  </template>
</v-data-table>

Можно поподробнее об этом? Откуда предмет? Спасибо!

— 02.11.2020 02:09

11.06.2020 10:54