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 :)
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>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>```