-1

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?

Appu
  • 35
  • 5
  • 2
    This may be outdated info (which is why I'm posting it as a comment instead of an answer) but last time I checked, I believe the recommendation was to use v-if and v-for on different DOM elements (include the v-if on a child, so the v-for will loop and the v-if can filter the loop) – Daniel Beck May 11 '23 at 21:16
  • 1
    I think your code should be `v-if="!response.isDefaultResponse"`, I don't think `this` is what you think it is in the `v-if` context. However, I agree with the above comment that you should probably not use them both on the same DOM element. I think a much cleaner way is to wrap the responses in a method to strip out any responses you don't want to show, as detailed in this answer: https://stackoverflow.com/a/53639895/13070 – Mark B May 11 '23 at 21:18

2 Answers2

1

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>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
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 !== ''"
/>
LyuMir
  • 84
  • 3
  • 1
    This solved the issue. I used v-for="response in filtereredResponses" and then created a method filtereredResponses() that further filter outs responses. – Appu May 12 '23 at 16:28