[Vuejs]-How to simplify conditional expression in v-bind?

by

2👍

An alternative is to move it to a method for clarity, but probably overkill for this small amount of logic:

   methods: {
     buildHref(link, id, type) {
       const href = `${link}/${id}`

       if (type === 'exampleType') {
         return `${href}?exampleGetParam=true`
       }

       return href
     }
   }

Use:

   :href="buildHref(link, id, type)"

1👍

You can put statements in ${} not just variable names

So: like this

:href="`${link}/${id}${type === 'exampleType' ? '?exampleGetParam=true' : ''}`"

0👍

Try to wrap the whole expression with string template :

<a :href="`${link}/${id}${type === 'exampleType'?'?exampleGetParam=true':''}`" />

Leave a comment