Vue CLI 3 - 输入字符计数问题 v-model答案

【问题标题】：Vue CLI 3 - problem with counting of inputs characters v-modelVue CLI 3 - 输入字符计数问题 v-model
【发布时间】：2021-12-11 19:50:59
【问题描述】：

我是 Vue 的初学者，希望得到您的帮助:)

我需要计算文本输入中的字符数（但只有数字）有v-model 并将结果显示为某个数字变量。输入是来自.json 文件的v-for 显示的内部元素。我的 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>

问题是当我输入一些值时，它适合每个v-for 元素input。需要做什么才能使其对每个 input 单独工作？

提前感谢您的帮助:)

【问题讨论】：

您目前遇到的错误是什么？
优惠券应该在产品上或使用for循环索引作为其索引制成数组，然后执行{{charCount(product.coupon)}}或{{charCount(coupons[index])}}
@LawrenceCherone 你能在我的代码中显示需要做什么吗？我将v-model 更改为v-model="coupons[index]" 并添加到数据coupons: [] 现在我的方法什么都不返回
@Amaarrockz，然后当我在input 中输入一个值并尝试使用charCount() 方法计算字符数时，该值在所有输入中都是重复的

标签： javascript vue.js vuejs3

【解决方案1】：

你需要维护一个数组来分别管理所有的输入字段

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

【讨论】：

【解决方案2】：

如果您可以将coupon 和couponCharCount 字段放入您的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>

【讨论】：