Как добавить карточку из вкладки «в ожидании» в «утверждено»?Vue.js - PullRequest
Новая
       31

Как добавить карточку из вкладки «в ожидании» в «утверждено»?Vue.js

0 голосов
/ 08 ноября 2018

У меня проблема с добавлением элемента (карты) из одной вкладки в другую ...

enter image description here

это мой код я использую 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 - это метод, с помощью которого я отправляю свои данные в отклоненный []. помогите пожалуйста решить эту проблему! спасибо!)

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Проблема в обработчике кликов 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 методу

EDIT:

Если вы хотите, чтобы элемент был виден на отклоненной вкладке, вы должны удалить v-bind="rejected" из <el-tab-pane> и добавьте v-for для rejected.

* * Пример тысяча двадцать-один: * * 1 022 
<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>
0 голосов
/ 08 ноября 2018

Похоже, вы пытаетесь нажать 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>
...