首页 > vue怎么实现点击插入输入框用数组数据的方式呢?

vue怎么实现点击插入输入框用数组数据的方式呢?

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

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


 <div class="form-group" id="22">
                        <control-label label="姓名:"></control-label>
                        <ui-input></ui-input>
                        <div  v-for="item in addInputs" id="{{item.modal}}">
            
                        </div>
                        <ui-button  id="add-input" label="新增input"  v-on:click="addInput(times)">请输入代码</ui-button>
                    </div>       

       
----------
 //定义模块
        var label=Vue.extend({
            props:{
                label:''
            },
            template:'<label class="control-label" v-text="label"></label>'
        });
        var input=Vue.extend({
            template:'<input type="text" placeholder="请输入" v-model="msg"/>'
        });
        var button=Vue.extend({
            // props:['idName','checkText'],
            props:{
                id:'',
                label:''
            },
            template:'<button type="button" class="btn btn-primary" v-bind:id="id" v-text="label"></button>'
        });
        Vue.component('control-label',label);
        Vue.component('ui-input',input);
        Vue.component('ui-button',button);
         var form=new Vue({
            el:'body',
            data: {
                msg:'',
                times:0,
                addInputs:{modal:'<ui-input></ui-input>'}
            },
            methods: {
                addInput:function(){
                    this.times++;
                    console.log(this.times);
                   // this.click=true; //if条件判断,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)
        }
    }
})

例子

【热门文章】
【热门文章】