如何在 v-text 中使用条件运算符作为 Vue.Js 组件？答案

【问题标题】：How can I use conditional operator in v-text as Vue.Js components?如何在 v-text 中使用条件运算符作为 Vue.Js 组件？
【发布时间】：2021-03-27 05:31:11
【问题描述】：

我正在使用 Vue.Js，也使用 Nuxt.js 作为框架，语言是 TypeScript。

我真的很想使用以下数据制作如下表格。

export const dummy_taskData =
[
    {
        id: "common_task",
        tasks: [
            {
                tid: "all#budget",
                tname: "Invoie"
            },
            {
                tid: "all#inquiry",
                tname: "QA"
            },
            {
                tid: "all#deskwork",
                tname: "deskwork"
            },
            {
                tid: "XX#business",
                tname: "PaperWork"
            },
            {
                tid: "XX#H&R",
                tname: "PaperWork"
            },
            {
                tid: "YY#H&R",
                tname: "PaperWork"
            }
        ]
    }
]

所以我尝试使代码如下。

<template>
  <v-simple-table dense>
    <thead>
      <tr>
        <th>task</th>
        <th>item</th>
        <th>item2</th>
      </tr>
    </thead>
    <tbody class="hover_stop">
      <template v-for="(item,index,tid) in newItems">
        <tr :key="tid">
          <td v-if="tid === 0" :rowspan="newItems.length">common_task</td>
          <td v-text="item.tid === newItems[item.index-1].tid?'':item.tid"></td>
          <td>{{item.tname}}</td>
        </tr>
      </template>
    </tbody>
  </v-simple-table>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { dummy_taskData } from '~/store/dummy'
 
interface Tasks {
  tid: string
  tname: string
}
interface Items {
  id: string
  tasks: Tasks[]
}
@Component({})
export default class extends Vue {
  items: Items[] = dummy_taskData
  newItems:(Tasks|undefined)[] = []
  mounted() {
    let findCommon:Items[] = this.items.filter((e:Items)=>{
        return e.id === 'common_task'
    })
    let makeNewItems = findCommon[0].tasks.map((item)=>{
        if(item.tid.includes("all")){
            return {tid:"all",tname:item.tname}
        } 
        else if(item.tid.includes('XX')){
            return {tid:"XX",tname:item.tname}
        } else {
            return {tid:item.tid,tname:item.tname}
        }
    })
    this.newItems = makeNewItems
  }
}
</script>
<style lang="scss" scoped>
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td, .v-data-table--dense > .v-data-table__wrapper > table > thead > tr > td, .v-data-table--dense > .v-data-table__wrapper > table > tfoot > tr > td{
    border-bottom: thin solid rgba(255,255,255,0.12);
}
</style>

我运行了这段代码，但发生了类似的错误

TypeError: Cannot read property 'tid' of undefined

我认为“条件运算符”是这种情况的最佳方式，但我无法修复我的代码。有人给我建议吗？

【问题讨论】：

标签： javascript typescript vue.js nuxt.js vuetify.js

【解决方案1】：

存在三个问题：

虽然newItems 是一个数组，但v-for 使用3 个参数对其进行迭代，这是一种仅用于迭代对象的语法。所以tid 在循环中的任何地方都是未定义的。你可以在item.tid 上找到它。
您尝试在<td>s 之一中访问item.index，但items 没有index 属性，它们只有tid 和tname：

newItems[item.index-1]

即使使用正确的语法，index-1 也会在索引为 0 时抛出错误，因为它会尝试在索引为 -1 的元素上查找属性

这将解决所有问题：

<template v-for="(item, index) in newItems">
  <tr :key="item.tid">
    <td v-if="item.tid === 0" :rowspan="newItems.length">common_task</td>
    <td v-text="index && item.tid === newItems[index - 1].tid ? '' : item.tid"></td>
    <td>{{item.tname}}</td>
  </tr>
</template>

【讨论】：