vue.js - vue怎么实现点击插入输入框用数组数据的方式呢？

问题描述

问 题

vue怎么实现点击插入输入框用数组数据的方式呢？
代码如下：

现在通过这种点击判断click状态只能执行一次，再次点击按钮，click则一直处于true的状态。可能是模式理解错误，大家有没有好的建议

解决方案

<form action="">
    <h4>姓名</h4><a href="javascript:void(0)" @click="add">新增</a>
    <p v-for="name in form.names">
        <input v-model="name.text" type="text" name="names[]"><a href="javascript:void(0)" @click="delete($index)">刪除</a>
    </p>
</form>

<hr>

<pre>
    {{ $data | json}}
</pre>

new Vue({
    el: 'body',
    
    data: {
        form: {
            names: [{
                text: ""
            }]
        }
    },
    
    methods: {
        add() {
            this.form.names.push({
                text: ""
            })
        },
        
        delete(index) {
            this.form.names.splice(index, 1)
        }
    }
})

例子

这篇关于vue.js - vue怎么实现点击插入输入框用数组数据的方式呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！