[Vuejs]-Unable to set the value to the first input field using id of the field – in vue

by

0👍

a) v-model is internally implemented as:

<input v-model="myval">
<!-- is --!>
<input :model-value="myval" @update:model-value="v => myval = v">

so you can freely define your own function

<input v-for="obj, ind of whatever" @update:model-value="v => myfn(v, obj, ind)">

b) same as you have an array you v-for on you may make a parallel array

// you get the idea
data: () => ({ imputs: entries.map(e => 0) })

<div v-for="entry, ind of imputs">
  <Whatever :entry="entry"/>
  <imput v-model="imputs[ind]"> 
</div>

c) keep your imputs in objects, generally the best choice

// you get the idea
data: () => ({ imputs: entries.map(e => ({ entry: e, input: 0 })) })
// or
computed: {pairs(){ return this.entries.map(e => ({ entry: e, input: 0 })) }}

<div v-for="item of imputs">
  <Whatever :entry="item.entry"/>
  <imput v-model="item.input"> 
</div>

0👍

Here is how you can achieve that.

  data() {
    return {
      itemList: [
        { id: 1 , value: '' },
        { id: 2, value: '' },
        { id: 3, value: '' }
      ]
    }
  },
    
  methods:{
    selectingFav: function(value) {
      // value holds the index
      if (value === 1 )
        this.itemList[0].value = this.selected;
      else if(value === 2 )
        this.itemList[1].value = this.selected;
      else
        this.itemList[2].value = this.selected;
      }
    }
  }

In HTML template section

<tr v-for="(items,i) in itemList">
  <td valign="top">&nbsp;{{items.id}}&nbsp;</td>
  <td align="left" nowrap>
  <input v-model="items.value" type="text" :id="'item_code_'+items" 
 @input="handleInput" size="20" maxlength="27" autocomplete="off">
  <br/>
</td>

Leave a comment