Pass a data element in an argument

Hi. I don’t know if I managed to type an accurate title since I don’t know the correct terminology.

I have a bunch of input fields and a function is called while typing in any one of them. So I need to pass that inputs name as argument. The problem is when I try the argument name in function, it returns “undefined” error.

Here is my input.

<v-text-field label="Price" v-model="product.price" name="price" @input="changeComma(price)"></v-text-field>

Here is my shortened data object:

data() {
    return {
        product: {
            name: "",
            price: "",
            tag: "",
        }
    }
}

And my method is like so:

changeComma(field) {
    this.product.field = this.product.field.replace(",", ".");
}

Basically, and normally, it’s looking for a property named “field”, but there is no such thing.
Question is, how can I make it work?

Thanks.

Don’t know if it’s the efficient way, but you can use refs to access each field, using index (assuming your input is in a v-for):

<v-text-field label="Price" v-model="product.price" name="price" @input="changeComma('price'+index)" ref="'price'+index></v-text-field>

So you can access each input simply by:

changeComma(fieldRef) {
    this.$refs[fieldRef] = this.$refs[fieldRef].replace(",", ".");
}

Hope this helps :slight_smile:

Hello Maz, thanks for your help. Unfortunately, I’m getting “Cannot read property ‘replace’ of undefined” error. BTW, my inputs are not in v-for.

I found the solution with a different approach.

<v-text-field
    label="Price"
    v-model="product.price"
    name="price"
    @input="changeToDot"
></v-text-field>

and the method is like so

changeToDot() {
  var field = event.target.name;
  var value = event.target.value.replace(",", ".");
  this.product[field] = value;
},

If you just wanna to pass a string in, I think you can use @input(change({“name”:“product1”}))

Instead of

you might want to use

@input="changeComma('price')"></v-text-field>

and then

changeComma(field) {
    this.product[field] = this.product[field].replace(",", ".");
}

Thanks fiedsch. It’s a good advice, but I think I will stick with event.target.name. It gives me exactly what I want.

Thanks rackareq.