How to change <td> text on click in Vue 3?

user_13223775 0
Viewed 41

I have a table displaying email data, including the email subject which is initially truncated (substr). I would like to display the full email subject when the table data cell is clicked.

<tbody>
  <tr v-for="email in emails.data" :key="email.id">
    <td v-text="store.getSubjectTruncated(email)" :title="store.getSubject(email)"></td>
    ...

Currently I've only been able to display the full subject as the "title" when hovering over the cell.

Is it possible to do something like @click="v-text = getSubject(email)"?

vuejs3 vue.js html
2 Answers

In your script add a property called currentShownEmail :

const currentShownEmail=ref(-1)

in template update that property with index value and use it render th email conditionally :

  <tr v-for="(email,index) in emails.data" :key="email.id">
    <td @click="currentShownEmail=currentShownEmail===index?-1:index" 
            v-text=""currentShownEmail===index? store.getSubject(email) :  store.getSubjectTruncated(email)" 
            :title="store.getSubject(email)"></td>
user_81728570

To make it simple, You can just invoke the required logic based on the flagged set on click the table cell.

Template :

<td @click="showFullSubject = true" v-text="showFullSubject ? store.getSubject(email) : store.getSubjectTruncated(email)"></td>

Script :

// Either in setup or onMounted, we can set showFullSubject default value as false.
onMounted() {
  showFullSubject: false;
}
user_41163000
Related