Losing data when clicking out of the input

I’m using Vuesax Framework, I make inputs with v-for, this inputs have dynamic v-model and dynamic placeholder too and also dynamic array on v-for, but I have two cases, the first one it’s when I have an array of an element, and the second on it’s just when I have one element. I’ve used a functions that return the array or just the element depends according to other variables. Now if I set a value in one of the inputs, I lost this info when I click out. I tried to give the v-model, placeholder and the v-for directly the returned variable but I still have the problem

The HTML

<vs-input
        :v-model="uniteOrder(j)"
        class="w-100 mt-8"
        :label-placeholder="matiereName(j)"
        :key="j"
        v-for="j in matiereIdLength()" />

The Methods

methods: {
    uniteOrder(j) {

      if (this.addOrEdit == 'add') {

        return this.unite_order[j-1]
      } else {

        return this.unite_order
      }
    },
    matiereName(j) {
      if (this.addOrEdit == 'add') {

        return this.matiere_name[j-1]
      } else {

        return  this.matiere_name;
      }
    },
    matiereIdLength() {

      if (this.addOrEdit == 'add') {

        return this.matiere_id.length
      } else {

        return this.matiere_id.toString().split()
      }
    },

you have to use a data property (or a computed proerty with a getter & setter) with v-model. you can’t use a function like you try here, because Vue needs to set the new value to this property, and you can set a value on the return value of this function.

1 Like

Can you expand on this? I need a bit more context to understand the difference that you have to handle here.

1 Like

But the Computed does’nt accept parameters, how can I transfert the j parameter?

Hello sir

I’m usign computed now like this, but I still losing data from input when I click away.

HTML

    <vs-input
    :v-model="uniteOrder(j)"
    class="w-100 mt-8"
    :label-placeholder="matiereName(j)"
    :key="j"
    v-for="j in matiereIdLength" />

Computed

matiereIdLength() {

  if (this.addOrEdit == 'add') {

    return this.matiere_id.length
  } else {

    return this.matiere_id.toString().split()
  }
},
uniteOrder() {

  return (j) => this.addOrEdit == 'add' ? this.unite_order[j-1] : this.unite_order
},
matiereName() {

  return (j) => this.addOrEdit == 'add' ? this.matiere_name[j-1] : this.matiere_nam
},

that doesn’t solve the issue as your computed is once again only a getter -it’s returns a value (or rather, a function returning a value) to show in the dom. it doesn’t have a setter - a way to write a value from the input into your component.

if you need this approach with a function, you will have to drop v-model and instead handle v-bind:value and v-on:input yourself.

1 Like

Thank You sir.

Would you like to give an article about what did you explain te me to have more details? Please

I try this but it still doesn’t work.

uniteOrder: {

  get () {
    return (j) => this.addOrEdit == 'add' ? this.unite_order[j-1] : this.unite_order
  },
  set (newValue) {
    return newValue
  }
},

Try this:

<vs-input
  :value="uniteOrder(j)"
  @input="setUniteOrder(j, $event)"
  class="w-100 mt-8"
  :label-placeholder="matiereName(j)"
  :key="j"
  v-for="j in matiereIdLength()" />


computed: {
  uniteOrder() {
    return (j) => this.addOrEdit == 'add' ? this.unite_order[j-1] : this.unite_order
  }
},
methods: {
  setUniteOrder(j, value) {
    // TODO put the value somewhere
    this.unite_order[j] = value;
  }
}

Thank You for you answer, but I always have the same problem !