Question 167622 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 !== ''"
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search