The v-model value within the v-for loop is not unique.
Here is the provided template:
<template>
<div
id="FAQ"
v-for="(question, index) in questions.slice().reverse()"
:key="index"
class="m-2 col-7"
>
<div v-if="getloggedUser.role == 'tutor'">
<div id="divQuestion">
<p class="m-5">{{ question.text }}</p>
</div>
<div id="divAnswer" class="mt-2">
<p class="m-2">{{ question.answer }}</p>
</div>
</div>
<div v-else>
<div id="divQuestion">
<p class="m-5">{{ question.text }}</p>
</div>
<div id="divAnswer" class="mt-2">
<p class="m-2">{{ question.answer }}</p>
</div>
<div v-if="question.answer == null" id="divPsycAnswer">
<textarea cols="60" rows="3" style="border-radius:12px" v-model="answer.text"></textarea>
<button id="btnSend" @click="publishAnswer(question.id)">Responder</button>
</div>
</div>
</div>
</template>
Below showcases the script (data) provided:
data() {
return {
// arrayFAQ: [],
form: {
text: ""
},
answer: {
text: ''
},
questions: [],
message: "",
loading: false,
id: null
}
},
Whenever I input text in one textarea, it shows up in all the others. I attempted to add [index] in the v-model, but encountered this error: "TypeError: Cannot use 'in' operator to search for '0' in "