i'm beginner in Vue and hope for your help :)

I need to count of characters in text inputs (but only numbers) has v-model and show the result as a some number variable. Inputs are inside elements displayed by v-for from .json file. Example code of 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";
    
    name: 'App',
    data() {
        return {
            products: productsData,
            coupon: '',
            couponCharCount: 0
        }
    },
    methods: {
        charCount() {
            // only numbers filter
            this.coupon = this.coupon.replace(/[^0-9.]/g,'');

            // trying to count the characters
            this.couponCharCount = this.coupon.length;
        }
    }
</script>

The problem is that when I enter some value, it fits in every v-for element input. What needs to be done to make it work separately for each input?

Thanks in advance for your help :)

CodePudding user response：

If you can put coupon and couponCharCount fields in your products.json:

new Vue({
  el: '#demo',
  data() {
    return {
      products: [{id: 1, coupon: null, couponCharCount: null}, {id: 2, coupon: null, couponCharCount: null}],
    }
  },
  methods: {
    charCount(product) {
      product.coupon = product.coupon.replace(/[^0-9.]/g,'');
      product.couponCharCount = product.coupon.length;
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
    <div class="product-item" v-for="(product,index) in products" :key="product.id">
        <input type="text" v-model="product.coupon" @input='charCount(product)'>
        {{ product.couponCharCount }}
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to maintain an array to manage all the input fields separately

<template>
    <div class="product-item" v-for="(product,index) in products" :key="product.id">
        <input type="text" v-model="coupon[index]" @input='charCount(index)'> <!-- Change added -->
        {{ couponCharCount[index] ? couponCharCount[index] : 0  }} <!-- Change added -->
    </div>
</template>

<script>

    import productsData from "../public/products.json";
    
    name: 'App',
    data() {
        return {
            products: productsData,
            coupon: [], // change added
            couponCharCount: [] // change added
        }
    },
    methods: {
        charCount(index) {
            // only numbers filter
            this.coupon[index] = this.coupon[index].replace(/[^0-9.]/g,''); // change added

            // trying to count the characters
            this.couponCharCount[index] = this.coupon.length; // change added
        }
    }
</script>```