Soy principiante en Vue y espero su ayuda :)
Necesito contar los caracteres en las entradas de texto (pero solo los números) tiene v-model y mostrar el resultado como una variable numérica. Las entradas son elementos internos mostrados por v-for del archivo .json . Código de ejemplo de mi 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> El problema es que cuando ingreso algún valor, cabe en cada input de elemento v-for . ¿Qué se debe hacer para que funcione por separado para cada input ?
Gracias de antemano por tu ayuda :)
Si puede poner campos de coupon y couponCharCount en sus 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>Debe mantener una matriz para administrar todos los campos de entrada por separado
<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>```