У меня есть таблица vuetify, и один из столбцов — url
. Мне нужно добавить логику либо к отображаемому URL-адресу, либо к имени группы URL-адресов. Я могу сказать это на основе свойства моего массива правила. Если мои правила[i].urlGroup != '', то я знаю
я пытался добавить
<template v-slot:item.url = "{ index, item }">
{{ displayURLInfo(index) }}
</template>
displayURLInfo(index) {
if (this.rules[index].urlGroup != '') {
// console.info('this.rules[index].urlGroup', this.rules[index].urlGroup) // here printed perfectly on console.
return this.rules[index].urlGroup
} else {
return this.url
}
}
Я был внутри первого условия if, он отлично записывает консоль, но не отображается в пользовательском интерфейсе.
Моя структура массива правил выглядит так. У него всего 5 свойств
вроде должно быть urlGroup
вместо userGroup
@RohìtJíndal Я исправил орфографию .... они должны быть urlGroup
обновлены все коды. Но это не главная проблема, почему он продолжал показывать пустой :(
@Bravo Если urlGroup != ''
покажи. В противном случае покажите url
как я уже сказал ... вы должны вернуть this.rules[index].url
, если this.rules[index].urlGroup
пусто ... возможно? - именно то, что показывает ответ, который вы приняли, - так что не знаю, почему вы меня исправляете
@Bravo, извините, я пропустил ваш комментарий, вы правы на 100%.
Вы должны сделать следующее исправление в методе displayURLInfo() :
urlGroup
вместо userGroup
.return this.url
должно быть return this.rules[index].url
Рабочая демонстрация:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{ text: "Priority", value: 'priority' },
{ text: "Name", value: 'name' },
{ text: "URL", value: 'url' },
],
rules: [{
priority: 1,
name: "Alpha",
url: 'https://example.com',
urlGroup: ''
}, {
priority: 2,
name: "Beta",
url: 'https://example.com',
urlGroup: 'userGroup2'
}],
}
},
methods: {
displayURLInfo(index) {
if (this.rules[index].urlGroup != '') {
return this.rules[index].urlGroup
} else {
return this.rules[index].url
}
}
}
})
<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id = "app">
<v-app id = "inspire">
<v-data-table
:headers = "headers"
:items = "rules"
>
<template v-slot:item.url = "{ index, item }">
{{ displayURLInfo(index) }}
</template>
</v-data-table>
</v-app>
</div>
что показывает первая картинка? как это должно выглядеть?
this.rules[index].urlGroup
выглядит как пустая строка — следует ли возвращатьthis.rules[index].url
, еслиthis.rules[index].urlGroup
пусто... возможно?