How can I use conditional operator in v-text as Vue.Js components?

user_13697559 0
Viewed 1405

I am using Vue.Js and also using Nuxt.js as framework, and language is TypeScript.

I really want to make the table like following using below data.

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"
            }
        ]
    }
]

my goal is like this

So I tried to make code the following.

<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>

I ran this code, but error occurred like

TypeError: Cannot read property 'tid' of undefined

I thought 'conditional operator' was best way that kind of case, but I couldn't fix my code. Does anyone advise me?

nuxt.js vuetify.js vue.js typescript javascript
1 Answers

There are three problems:

  1. Though newItems is an array, the v-for iterates it using 3 arguments, which is a syntax only for iterating objects. So tid is undefined everywhere in the loop. You can find it on item.tid instead.

  2. You've tried to access item.index in one of the <td>s but the items don't have an index property, they have only tid and tname:

newItems[item.index-1]
  1. Even with the right syntax, index-1 will throw an error when index is 0, because it will try to look up a property on the element with an index of -1

This would fix all issues:

<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>
user_21850930
Related