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

Question

我正在使用 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

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

Answer 1

存在三个问题：

1. 虽然newItems是一个数组，但v-for使用 3 arguments 对其进行迭代，这是一种仅用于迭代对象的语法。 所以tid在循环中的任何地方都是未定义的。 您可以在item.tid上找到它。

2. 您已尝试在其中一个<td>s中访问item.index ，但这些items没有index属性，它们只有tid和tname ：

newItems[item.index-1]

3. 即使使用正确的语法， index-1也会在 index 为 0 时抛出错误，因为它会尝试在 index 为 -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>