deng_zhihao692817
deng_zhihao692817
采纳率0%
2019-07-09 16:58 阅读 2.0k

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条回答 默认 最新

  • qq_36022290 zhenyu-s5 2019-07-09 17:11
    list:[
                {
                        title: 'A问题',
                        showContent: false,
                        content:[]
                },
                {
                        title: 'B问题',
                        showContent: false,
                        content:[]
                }
        ]
    

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

    点赞 评论 复制链接分享

相关推荐