Html Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    Just 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

    Login or Signup to reply.
  2. 0

    It would be better to use computed property, because it only recalculates if its dependencies get changed, but functions will recalculate whenever the component gets rerendered, for more details you can check this answer

    computed: {
  getPercentage() {
    const like = this.software[6]
    const dislike = this.software[7]
    return like / (like + dislike);
  },
}

    Then you can use it like

    <p>
    {{ getPercentage }}
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search