I have a script which displays the global responses of chatbot in my application. The global response module of application has the option to mark one response as default.
script:
<div class="section bg-gray-100 border border-gray-400 p-4">
<p class="font-bold text-lg mb-4">
standard + custom responses
</p>
<global-response
v-for="response in responses.communityIntentUsesGlobalIntentResponse"
:key="response.id_intent_response"
:response="response"
:isDisable="toDelete && toDelete.type !== ''"
/>
</div>
The current behaviour is that the default responses are also included in the script which I don’t want. I used v-if="!this.isDefaultResponse" after v-for in global response but it still displays the default response. Is there any way to use them together and prioritize the filter to not select the default response?
2
Answers
v-if
has higher precedence thanv-for
, so using them on the same element usually does not yield the intended result. You can putv-for
on a<template>
element wrapping all the<global-response>
s instead. Then,v-if
can be used to filter the elements.you can use any useful methods in v-for, like ‘filter’, ‘map’ etc…