Hey everyone, I'm new to Vue and could really use your assistance!
I am trying to count the number of characters in text inputs that contain only numbers using `v-model`. The goal is to display the character count as a variable. These inputs are generated dynamically inside elements from a `.json` file using `v-for`. Below is an example snippet from my App.vue:
<template>
<div class="product-item" v-for="(product,index) in products" :key="product.id">
<input type="text" v-model="coupon" @input='charCount()'>
{{ couponCharCount }}
</div>
</template>
<script>
import productsData from "../public/products.json";
export default {
name: 'App',
data() {
return {
products: productsData,
coupon: '',
couponCharCount: 0
}
},
methods: {
charCount() {
// filter out non-numeric characters
this.coupon = this.coupon.replace(/[^0-9.]/g,'');
// count the characters
this.couponCharCount = this.coupon.length;
}
}
}
</script>The issue I'm facing is that when I input a value, it reflects across all `input` elements generated by `v-for`. What adjustments should I make to ensure each `input` works independently?
Thank you all in advance for any help you can provide!