javascripthtmlvue.js

How can I call a function with parameters in html <p>


I want to have a like nad dislike percentage on cards.

<v-card
        v-if="software[2] == searched || searched == ''"
        class="software-card"
      >
        <h3>{{ software[2] }}</h3>
        <h2>{{ software[3] }}</h2>
        <p>{{ software[4] }}</p>

        <v-row>
          <v-col>
            <v-btn class="button">Read More</v-btn>
          </v-col>
          <v-col>
            <p>
              {{ percentage }}
            </p>
          </v-col>
          <v-col>
            <v-icon class="like" color="green" icon="mdi-thumb-up"></v-icon>
            <p class="like">{{ software[6] }}</p>
          </v-col>
          <v-col
            ><v-icon
              class="dislike"
              color="red"
              icon="mdi-thumb-down"
            ></v-icon>
            <p class="dislike">{{ software[7] }}</p>
          </v-col>
        </v-row>
      </v-card>

I have a function called getPercentage:

getPercentage(like, dislike) {
  this.percentage = like / (like + dislike);
},

How can I call this function so I can send software[6] and software[7] to the function - which are the like and dislike counts - at p tag


Solution

  • Call it from the template:

    getPercentage(like, dislike) {
      return like / (like + dislike);
    },
    ...
                <p>
                  {{ getPercentage(software[6], software[7]) }}
                </p>
    

    If you don't use the function anywhere else you can calc directly:

                <p>
                  {{ software[6] / (software[6] + software[7]) }}
                </p>
    

    But I would use named properties instead of software[n] in the first place