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

Question

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]"

貌似不对

Answer 1

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

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