Set q-search `suffix` attribute dynamically

[toymachiner62]

How can I set the q-search suffix attribute dynamically? like calling a computed function or something?

This is what i’m trying to achieve

This is the code I have
<q-search v-model="terms" placeholder="Search" :after="[{icon: 'fal fa-times', content: true, handler: clearSearch}]" suffix="numberOfResults" hide-underline class="no-border" />

And this is what it’s producing

You can see that suffix="numberOfResults" is producing the literal string numberOfResults rather than calling a function

[rstoenescu]

:suffix="numberOfResults"

[Hawkeye64]

Yes, don’t forget to bind :suffix so it’s treated as javascript.

[toymachiner62]

Doesn’t work.

<q-search v-model="terms" placeholder="Search" :suffix="numberOfResults" hide-underline class="no-border" />

...
methods: {
    numberOfResults () {
      console.log('here')
    }
}
...

produces:

[metalsadman]

@toymachiner62
try :suffix="`{numberOfResults()}`" or use a computed property, note that suffix only accepts a string.

[toymachiner62]

:suffix="{numberOfResults()}"

Produces this error

[toymachiner62]

But this works!

:suffix="numberOfResults()"

[metalsadman]

weird, maybe it does accept a function, although docs says String.

[Hawkeye64]

if the function is in methods, add parenthesis to it: :suffix="numberOfResults()", if the function is computed, then it’s treated like a value, not a function, therefore do not add parenthesis to it: :suffix="numberOfResults"