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

Posted 2023-02-22

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

【英文标题】：How can I use conditional operator in v-text as Vue.Js components?

【发布时间】：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

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

【参考方案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>