Level 14
depends how you are calling/triggering this addRuleToSection method, instead of console logs you can add breakpoints break; and follow step by step
Mar 7, 2024
5
Level 9
Why does this create a Loop
I'm trying to add/remove an item from a reactive array but I'm not sure why this code is creating an infinite loop where the gets added and removed and added and removed and ...... forever.
This is the code on my page
props: {
section: {
type: Object,
required: true,
default: () => ({
key: uuid(),
title: null,
number: null,
survey_section_rules: [],
survey_questions: []
})
},
},
methods: {
addRuleToSection(rule_id) {
console.log('start')
const index = this.section.survey_section_rules.indexOf(rule_id);
if (index === -1) {
console.log('add')
this.section.survey_section_rules.push(rule_id);
} else {
if (rule_id === this.section_rule_types.find(x => x.name === 'is_repeated').id) {
console.log('remove is_repeated')
this.section.survey_section_rules = [];
} else {
console.log('remove other')
this.section.survey_section_rules.slice(index, 1);
}
}
console.log('done')
},
},
the console.log looks like this
start
add
done
start
remove is_repeated
done
start ...
Why does this create a loop and how can I create a code that does this correctly?
Level 9
@krisi_gjika This is the html
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div v-for="rule_type in section_rule_types" class="rounded-md p-2 border border-transparent hover:border-gray-100 flex items-center">
<div class="flex gap-4 items-center cursor-pointer w-full h-full" v-if="rule_type.name === 'is_repeated'" @click="addRuleToSection(rule_type.id)">
<t-checkbox name="is_repeated" readonly :checked="ruleSelected(rule_type.id)" />
<div class="flex flex-col gap-1">
<p class="text-gray-600 font-semibold">Se Repite</p>
<p class="text-gray-400 text-sm">Hace que esta sección se pueda repetir.</p>
</div>
</div>
<div class="flex gap-4 items-center w-full h-full" v-if="rule_type.name === 'fast_response'"
:class="has_repeated ? 'cursor-pointer' : 'cursor-not-allowed'"
:title="has_repeated ? undefined : 'Debe tener habilitada la opción de Se Repite'"
@click="has_repeated ? addRuleToSection(rule_type.id) : undefined">
<t-checkbox name="fast_response" readonly :checked="ruleSelected(rule_type.id)" />
<div class="flex flex-col gap-1">
<p class="text-gray-600 font-semibold">Respuesta Rápida</p>
<p class="text-gray-400 text-sm">Hace que una sección se pueda contestar de una manera
mas rápida, contestando multiples preguntas a la vez.</p>
</div>
</div>
</div>
</div>
Level 29
Try to use splice instead of slice
slice Doesn't modify the original array, but is used to extract the elements to a new array
splice Modifies the original array
this.section.survey_section_rules.splice(index, 1);
Level 9
@gych It's still looping
Level 29
@msslgomez Check vue dev tools, might be helpful to see what's causing this.
Also add a key when you use v-for
<div v-for="rule_type in section_rule_types" :key="rule_type.id" class="rounded-md p-2 border border-transparent hover:border-gray-100 flex items-center">
Can you share the data of the array you're using then I can test your code in Vue playground.
Please or to participate in this conversation.