vuejs - accessing dynamically created input on function call

Question

<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 name id cols="30" rows="10">{{item.content[0]}}</textarea>
          </div>
          <div class="field right aligned">
            <button v-bind:id="item.id" @click="updateData" class="ui primary button">Update</button>
          </div>
      </div>
</div>

have this iteration, id like to access to the value of 'current' text area on updateData function call. I thought assigning id to textarea input as $ref but seems kid of off. Ayn help is appreciated, thanks!

If you want to use $ref, you have to use ref="..." on the element, as shown here: [what's the real purpose of 'ref' attribute?](stackoverflow.com/questions/44063606/… ) — Ferrybig
– Ferrybig, Commented Feb 28, 2019 at 10:21

Tristan De Oliveira · Accepted Answer · 2019-02-28 10:26:32Z

1

Use refs array

You need to use the index value of the v-for

And access to the refs by the 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>

answered Feb 28, 2019 at 10:26

Tristan De Oliveira

8085 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve · Accepted Answer · 2019-02-28 10:32:32Z

0

You can use databinding for the textareas, and pass the current item to your update funtion:

Vue.config.productionTip = false; // suppress

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>

answered Feb 28, 2019 at 10:32

Steve

20.5k5 gold badges47 silver badges71 bronze badges

1 Comment

serkan Over a year ago

Data binding with v-model, indeed! Thanks.

Collectives™ on Stack Overflow

vuejs - accessing dynamically created input on function call

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related