javascript - vue外部点击添加数组

问题描述

问 题

vue新手，现在遇到一个问题，我想在v-for外面用@click点击把某个数组添加进某个容器里，但是发现这样的话就找不到v-for的遍历了，我平时添加数组都是在v-for里面添加点击事件然后把其他数组添加进来的，可能表达不清楚，看图

//点击把左边数组添加进来

        <button @click="affirm(item)">确认</button>
        <div v-for="item in formTab">
            <span>{{ item.tabname }};</span>
        </div>

//下面这块是左边的数组

        <div class="industry">
            <span v-for="tabs in tabBox">
                <span class="active">{{ tabs.tabname }}
                    <span @click="deleteTab(tabs)">x</span>
                </span>
            </span>
            <i>{{tabCount}}</i>
        </div>
    </div>
    

//点击按钮添加，数组代码

      affirm(item) {
        for (let i = 0; i < this.tabBox.length; i++) {
            console.log(this.tabBox[i].tabname)
        }
        console.log(item)
        if (this.tabBox.length !== 0) {
            let newName = { tabname: item.tabname }
            this.formTab.push(newName);
        }
    }

解决方案

不是很明白，你要做什么，把item关联到v-for的item里， 既然只是把左边的数组，添加到右边，直接将tabBox追加到formTab不就行了吗？this.formTab = this.formTab.concat(this.tabBox)

这篇关于javascript - vue外部点击添加数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！