如何将卡从“待处理”选项卡添加到“已批准”？ Vue.js答案

【问题标题】：how can i add card from "pending" tab to "approved" ? Vue.js如何将卡从“待处理”选项卡添加到“已批准”？ Vue.js
【发布时间】：2019-04-11 21:12:55
【问题描述】：

我在将元素（卡片）从一个选项卡添加到另一个选项卡时遇到问题...

这是我的代码我正在使用 vue-cli！

    <el-tabs style="margin-top: 20px" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="PENDING" name="first">

            <el-row style="margin-top: 20px;">
                <el-col type="flex" :span="6" v-for="(o, index) in medias" :key="index">
                    <el-card style="margin: 5px;" class="box-card">
                        <div slot="header">
                            <h2>{{ o.author_username }}</h2>
                            <a :href="o.link">instagram</a>
                        </div>
                        <img :src="o.pic" class="image" width="430">
                        <div style="padding: 14px;">
                            <el-row :gutter="20" style="margin-top: 20px;">
                                <el-col :span="12">
                                    <div class="grid-content">
                                        <p>
                                            LIKES
                                        </p>
                                        <p class="text-bold-big small-margin">
                                            {{o.likes_number}}
                                        </p>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content">
                                        <p>
                                            COMMENTS
                                        </p>
                                        <p class="text-bold-big small-margin">
                                            {{ o.comments_number }}
                                        </p>
                                    </div>
                                </el-col>
                            </el-row>
                            <hr>
                            <div class="bottom clearfix">
                                <el-button type="text" @click="addRejected(o.index)" class="hide-reject-button">REJECT</el-button>
                                <el-button type="text" class="show-button">APPROVE</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </el-tab-pane>
        <el-tab-pane label="APPROVED" name="second">

        </el-tab-pane>
        <el-tab-pane v-bind="rejected" label="REJECTED" name="third">

        </el-tab-pane>
    </el-tabs>

这是脚本

<script>
    import mock_det from './details_mock.json'

    export default {
        data() {
            return {
                rejected:[],
                approved:[],
                medias: mock_det.medias,
                activeName: 'first'
            };
        },
        methods: {
            addRejected(index){
                console.log("works");
                this.rejected.push(index)
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>

所以！我决定简单地创建大量已批准的命名并将我的元素推到那里。但我不明白我是否做得对...... 'mock_det' 是我的带有卡片数据的 json 文件。 addRejected 是我将数据推送到rejected[] 的一种方法。请帮我解决这个问题！谢谢！）

【问题讨论】：

看起来你开始正确，只是不要忘记从媒体阵列中删除卡
好吧，当我将一些元素添加到被拒绝时，然后打开被拒绝的标签...我什么也没看到，它不起作用..
这个简单的机制应该可以工作。在您的示例中，您将索引推送到数组，但读取对象时，您是否忘记添加对象而不是索引？

标签： javascript vue.js vuex vue-cli

【解决方案1】：

问题在于addRejected 点击处理程序。将按钮更改为：

<el-button type="text" @click="addRejected(o)" class="hide-reject-button">REJECT</el-button>

另外，如果您希望从medias 数组中删除元素，请添加：

this.medias.splice(this.medias.find((media) => media === index), 1);

到addRejected 方法

编辑：

如果您希望元素在被拒绝的选项卡中可见，则应删除 v-bind="rejected" 来自<el-tab-pane> 并为rejected 添加v-for。

例子：

<el-tab-pane label="REJECTED" name="third">
    <el-row style="margin-top: 20px;">
        <el-col type="flex" :span="6" v-for="(o, index) in rejected" :key="index">
        /* Code here you want to have executed for every 'o' in 'rejected' */
        </el-col>
    </el-tab-pane>
</el-tab-pane>

【讨论】：

还是不行..也许我解释不正确
我想在 Rejected 选项卡中查看添加的元素！
@GermanVaranytsya 我已经更新了我的答案，请看一下

【解决方案2】：

您似乎正在尝试推送甚至可能未在此处定义的 o.index。

<el-button type="text" @click="addRejected(o.index)" class="hide-reject-button">REJECT</el-button>

如果你想从媒体推送对象，你需要推送 o。

<el-button type="text" @click="addRejected(o)" class="hide-reject-button">REJECT</el-button>

【讨论】：