Vuetify Table - 根据条件呈现列值

Question

我有一个 vuetify table，其中一列是 url。我需要添加逻辑来显示 URL 或 URL 组名。我可以根据我的 rules 数组的属性来判断。如果我的规则[i].urlGroup != '' 那么我知道

我尝试添加

<template v-slot:item.url="{ index, item }">
    {{ displayURLInfo(index) }}
</template>


displayURLInfo(index) {

    if (this.rules[index].urlGroup != '') {
        // console.log('this.rules[index].urlGroup', this.rules[index].urlGroup) // here printed perfectly on console.
        return this.rules[index].urlGroup
    } else {
        return this.url
    }
}

我在第一个 if 条件下，它完美地控制日志，但它没有呈现给 UI。

我的规则数组结构如下所示。它只有 5 个属性

我做错了什么？

Answer 1

您必须在 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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/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>

Vuetify Table - 根据条件呈现列值

Vuetify Table - rendering column value based on a condition

javascript

vue.js

vue-component

vuejs2

vuetify.js

我做错了什么？