如何使用Vue.js为HTML表单追加默认值为空的输入项

问题原因 #

你当前addInput方法中，向products和quantities数组追加的是「数组长度+1」的数值，这些数值被v-model绑定到输入项后，就会自动填充到输入框/下拉选择器中。

解决方案 #

1. 修改addInput方法

新增输入项时追加空值即可：

methods: {
    addInput() {
        // 下拉选择器默认选中「-Seleccionar-」选项，对应value为null，因此推入null
        this.products.push(null);
        // 数字输入框默认留空，推入null即可
        this.quantities.push(null);
    }
}

2. 修正v-for语法错误

你原代码中的v-for="(input, index) in products, quantities"不符合Vue语法规范，直接遍历products数组即可（两个数组长度始终同步，索引可以对应到quantities的对应项），同时补充v-for必须的key属性：

<div v-for="(item, index) in products" :key="index">
    <!-- 其余内部代码保持不变 -->
</div>

修改完成后新增的输入项就会默认是空值了。

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