Issue with Vue.js: Textarea not functioning properly within a v-for loop

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 "

Answer №1

Consider using this approach with your v-model:

<textarea v-model="responses[`input${identifier}`]"></textarea>

The response container may start as an empty container. This will generate input0, input1, input2 as properties in the response. Feel free to replace the identifier with any unique identifier, such as the question's ID, for easy reference and organization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable the duplication of strings within an array

Below is the HTML code snippet I am working with: <div class="col-sm-8"> <div class="row col-sm-12 pull-right paddingDiv"> <div class="col-sm-12"> <div class="marginBottom pull-right"> <bu ...

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

Recently, I have observed that a reference to an HTML element with an id can be easily accessed in JavaScript by using a variable named after that id (jsbin). What is the reason for this behavior? Why do we need to use getElementById(id) when we could sim ...

Footer placement not aligning at the bottom using Bootstrap

I'm having trouble getting my footer to stay at the bottom of my website without it sticking when I scroll. I want it to only appear at the bottom as you scroll down the webpage. Currently, the footer is positioned beneath the content on the webpage. ...

The invokeApply parameter within $interval remains unchanged and has no effect

In the documentation for AngularJS's $interval service, it is mentioned: invokeApply (optional) boolean: If set to false, skips model dirty checking. Otherwise, will invoke the function within the $apply block. This implies that setting invokeApp ...

What is the best way to extract properties from JSON data using Javascript?

The json output provided is as follows: { "categories":[ "Physical support- 18-64 (RA)" ], "series":[ { "name":"Buckinghamshire", "data":[ 9088 ] }, { "name":"Lincolnshire", ...

Retrieve the content from a textarea and insert it into a different textarea with additional text included

Users can input HTML codes into a textarea named txtar1. A 'generate' button is available; Upon clicking the 'generate' button, the content of txtar1 will be transfered to another textarea named txtar2 with additional CSS code. Here&ap ...

Testing Vue.js components - monitoring changes to props

I'm currently facing an issue while trying to unit test a watcher on a prop within a Vue component using Karma+Jasmine. It appears that the watchers on props are not being triggered during the unit test. Let's take a look at a simple example com ...

How to utilize Vue method for accessing DOM elements

I'm working on a container with various elements like h1, p, etc. The container has a background and I'm trying to create a method to move it based on mouse coordinates. However, I'm facing an issue where the e.target is showing me ele ...

AngularJS: splitting the parent <div> into multiple sections every nth element

I have an array of strings in Javascript and I am attempting to use AngularJS to create nested <div> elements. var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; My goal is to group every 3 elements together like so. <div class="pare ...

Invoking a function in JavaScript from within the same file

Currently in the process of developing a React application. One of the files I am working with is user.utils.js, where I have stored some utility functions that are utilized within my reducer. export const addUser = (state) => {} export const resetUse ...

What is the process of redefining the toString method for a function?

I am currently tackling a coding challenge that involves chaining functions. While researching possible solutions online, I noticed that many of them involved using function.toString and overriding the toString method of a function to create a chained add ...

What is the best way to eliminate a duplicate item from the shopping cart without actually deleting it?

I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

Attempting to render an image onto a canvas and apply Caman.js for image editing purposes

Currently, I have a code snippet that allows me to draw an image onto a canvas. Here is the code: var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var ...

Incorporate additional form element functionalities using radio inputs

Recently, I created code that allows a user to duplicate form elements and add values by clicking on "add more". Everything is functioning properly except for the radio inputs. I am currently stuck on this issue. Does anyone have any suggestions on how I c ...

Vue.js is unable to recognize this type when used with TypeScript

In my code snippet, I am trying to set a new value for this.msg but it results in an error saying Type '"asdasd"' is not assignable to type 'Function'. This issue persists both in Visual Studio and during webpack build. It seems like Ty ...

Creating a dynamic select functionality in Drupal forms

Being more focused on backend development, I am facing a challenge that may be simple for jQuery experts. In Drupal, I have two arrays - one containing names of views and the other having displays for each view. To populate these arrays, here is the code s ...

Is it possible to configure the async.retry method to retry even upon successful queries, depending on a specific condition?

Currently, I am delving into the node.js async module and wondering if it's possible to modify the behavior of the async.retry method. Specifically, I'd like it to retry even on successful operations but halt based on a certain condition or respo ...

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

What is the best way to swap out an icon based on the chosen option?

Here is my code: $('#mySelect').on('change', function() { var value = $(this).val(); $(".title").html(value); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href=" ...