Using Vue.js to access input elements that are dynamically generated when a function is called

Question

Using Vue.js to access input elements that are dynamically generated when a function is called

<div v-if="result.length" style="clear:both">
      <div v-bind:key="item.id" v-for="item in result">
        <div class="ui form">
          <div class="field">
            <label>Content</label>
            <textarea id="dynamic-textarea-{{item.id}}" cols="30" rows="10">{{item.content[0]}}</textarea>
          </div>
          <div class="field right aligned">
            <button @click="updateData($event, item.id)" class="ui primary button">Update</button>
          </div>
      </div>
</div>

During the iteration above, I am trying to find a way to access the value of the 'current' textarea when the updateData function is called. I considered assigning an id to the textarea input or using $ref, but it didn't quite work as expected. Any assistance on this issue would be greatly appreciated. Thank you!

javascript vue.js

Answer 1

Answer №1

Using an array of refs

Make sure to utilize the index from the loop

Access the refs using the corresponding index

<div v-bind:key="item.id" v-for="(item, index) in result">

<textarea ref="textarea" name id cols="30" rows="10">{{item.content[0]}}</textarea>

<button v-bind:id="item.id" @click="updateData($refs.textarea[index])" class="ui primary button">Update</button>

Answer 2

Using an array of refs

Make sure to utilize the index from the loop

Access the refs using the corresponding index

<div v-bind:key="item.id" v-for="(item, index) in result">

<textarea ref="textarea" name id cols="30" rows="10">{{item.content[0]}}</textarea>

<button v-bind:id="item.id" @click="updateData($refs.textarea[index])" class="ui primary button">Update</button>

Answer 3

Answer №2

To implement databinding for textareas, simply pass the current item to your update function:

Vue.config.productionTip = false; // disable production tip

new Vue({
    el: "#app",
    data: {
        result: [
           {id:0,content:['some content']},
           {id:1,content:['some content']},
           {id:3,content:['some content']},
        ]
    },
    methods:{
        updateData(item){
            alert(item.content[0]);
        }
    }
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-bind:key="item.id" v-for="item in result">
    <div class="ui form">
      <div class="field">
        <label>Content</label>
        <textarea name id cols="30" rows="10" v-model="item.content[0]"></textarea>
      </div>
      <div class="field right aligned">
        <button v-bind:id="item.id" @click="updateData(item)" class="ui primary button">Update</button>
      </div>
  </div>
  
</div>

Answer 4

To implement databinding for textareas, simply pass the current item to your update function:

Vue.config.productionTip = false; // disable production tip

new Vue({
    el: "#app",
    data: {
        result: [
           {id:0,content:['some content']},
           {id:1,content:['some content']},
           {id:3,content:['some content']},
        ]
    },
    methods:{
        updateData(item){
            alert(item.content[0]);
        }
    }
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-bind:key="item.id" v-for="item in result">
    <div class="ui form">
      <div class="field">
        <label>Content</label>
        <textarea name id cols="30" rows="10" v-model="item.content[0]"></textarea>
      </div>
      <div class="field right aligned">
        <button v-bind:id="item.id" @click="updateData(item)" class="ui primary button">Update</button>
      </div>
  </div>
  
</div>

Using Vue.js to access input elements that are dynamically generated when a function is called

Answer №1

Answer №2

Similar questions

Ways to retrieve a converted document using the Microsoft Graph API

Tips for confirming a date format within an Angular application

What is the best way to delete an entire node from Firebase?

Tips for creating a mock for a function that yields a JSX Element

When attempting to utilize the Vuex store in a child component, it appears to be ineffectual

Exploring LZMA compression in conjunction with next.js

Locating discord.js users who possess multiple roles

How can we best understand the concept of custom directives using the link method?

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

Renew the php blade foreach loop using jQuery to update data live

Retrieve the array element that is larger than the specified number, along with its adjacent index

Vue's reactivity fails to activate when utilizing Bootstrap 5's alert container

Error occurred within node while attempting to create a directory using mkdirsync

Design the parent element according to the child elements

How can I turn off autocomplete in MUI textfields?

Center column with header and footer flanking each side

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

The success method in the observable is failing to trigger

Initiate an Ajax call to pre-fetch video content

Surprising results when a class is applied using jQuery