CODEWITHSUNDEEP
javascriptvuejs3v-forvue-directives
Appu
Appu

Reputation: 45

V-if and v-for together in vue 3

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?

Upvotes: 0

Views: 1884

Answers (2)

LyuMir
LyuMir

Reputation: 100

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 !== ''"
/>

Upvotes: 2

Unmitigated
Unmitigated

Reputation: 89139

v-if has higher precedence than v-for, so using them on the same element usually does not yield the intended result. You can put v-for on a <template> element wrapping all the <global-response>s instead. Then, v-if can be used to filter the elements.

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

Upvotes: 1

Related Questions