V-if and v-for together in vue 3

Question

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?

Answer 1

you can use any useful methods in v-for, like 'filter', 'map' etc...

<global-response
    v-for="response in responses. communityIntentUsesGlobalIntentResponse.filter(r=>!r.isDefaultResponse)"
    :key="response.id_intent_response"
    :response="response"
    :isDisable="toDelete && toDelete.type !== ''"
/>