Vue CLI 3 中v-for循环输入框v-model绑定与字符计数异常问题

问题原因 #

所有v-for渲染的输入框都绑定了全局共享的coupon和couponCharCount变量，修改任意输入框都会修改同一个全局变量，自然会出现全部同步的问题。

解决方案 #

将每个输入框的状态独立绑定到对应product对象的属性上，修改后代码如下：

<template>
    <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>
</template>

<script>
import productsData from "../public/products.json";
    
export default {
    name: 'App',
    data() {
        return {
            products: []
        }
    },
    created() {
        // 初始化每个product的独立状态，保证响应性
        this.products = productsData.map(item => ({
            ...item,
            coupon: '',
            couponCharCount: 0
        }))
    },
    methods: {
        charCount(product) {
            // 仅保留数字和点
            product.coupon = product.coupon.replace(/[^0-9.]/g,'');
            // 统计当前输入框的数字字符数量
            product.couponCharCount = product.coupon.length;
        }
    }
}
</script>

核心修改说明 #

• 移除了全局共享的coupon、couponCharCount变量，改为每个product对象独立持有这两个属性，实现状态隔离
• input事件传入当前循环的product实例，仅修改对应实例的状态，不会影响其他输入框
• 如果使用Vue2开发，遇到新增属性无响应的问题，可以把初始化逻辑替换为this.$set(product, 'coupon', '')、this.$set(product, 'couponCharCount', 0)的写法

内容的提问来源于stack exchange，提问作者Ioann Sulyma