vue.js多个选项下如何动态添加各自文本框input?

1:问题描述:比如页面上有A问题、B问题...甚至更多问题, A问题下可以动态增加文本框input,B问题下也可以动态增加input。现在遇到的bug是A问题增加input,B问题同时也增加input。同理B问题增加input时A问题也增加了。怎么区分开呢?删除也一样。

下面代码:

<template>
    <div>
        <ul>
            <li class="rep-item" v-for="(item,index) in list" :key="index">
                <div class="title border-bottom" @click="changeContent(index)">
                    <span>{{item.title}}</span>
                    <span  @click.stop="addInput(index)">增加</span>
                </div>
                <div class="box border-bottom" v-show="item.showContent">
                    <div v-for="(item, key) in inputs">
                        {{item.id}}: <input class="rep-ipt" type="text" v-model="item.val" placeholder="填写需要维修内容">
                        <span class="iconfont" @click="delInput(key)">&#xe608;</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                inputs: [],
                list:[
                    {
                        title: 'A问题',
                        showContent: false,
                    },
                    {
                        title: 'B问题',
                        showContent: false,
                    }
                ]
        }
        },
        methods:{
            changeContent(index){
                this.list[index].showContent = !this.list[index].showContent;
            },
            addInput (index) {
                var input = {}
                input.id = this.inputs.length
                input.val = ""
                this.inputs.push(input)
            },
            delInput (index) {
                this.inputs.splice(index, 1);
            },
        }
    }
</script>

我尝试在addInput里面加上index:

addInput (index) {
                var input = {}
                input.id = this.inputs[index].length
                input.val = ""
                this.inputs[index].push(input)
            },

在v-for inputs中加上index

v-for="(item, key) in inputs[index]"

貌似不对

图片说明

1个回答

list:[
            {
                    title: 'A问题',
                    showContent: false,
                    content:[]
            },
            {
                    title: 'B问题',
                    showContent: false,
                    content:[]
            }
    ]

可以再里面加个数组,在增加和删除的时候传递一个参数来判断是问题A或者B,比如判断title

deng_zhihao692817
deng_zhihao692817 解决了 谢谢
大约一年之前 回复
deng_zhihao692817
deng_zhihao692817 这个我也想过~ 但是方法addInput就写不出来了 我再想想怎么写addInput
大约一年之前 回复
deng_zhihao692817
deng_zhihao692817 这个我也想过~
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问