how can i add card from “pending” tab to “approved” ? Vue.js

up vote
0
down vote

favorite

i have problem with adding my element(card) from one tab to another...

enter image description here

this is my code
i am using 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>

here is the script

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

so!
i decide to simply create massive named approved and push my element there.
but i don'tn understand if i did it correctly...
'mock_det' is my json file with data for cards.
addRejected is a method by which i am pushing my data to rejected.
help me please to solve that problem!
thank you!)

asked Nov 8 at 11:03

German Varanytsya

476

Looks like you started correctly, just don't forget to remove card from medias array
– Lanayx
Nov 8 at 11:12

well, when i add some elements to rejected, and open rejected tab... i see nothing, it doesn't work..
– German Varanytsya
Nov 8 at 11:14

This simple mechanism should work. In your example you are pushing index to the array, but reading objects, did you forget to add objects instead of index?
– Lanayx
Nov 8 at 11:17

add a comment |

up vote
0
down vote

favorite

i have problem with adding my element(card) from one tab to another...

enter image description here

this is my code
i am using 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>

here is the script

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

asked Nov 8 at 11:03

German Varanytsya

476

Looks like you started correctly, just don't forget to remove card from medias array
– Lanayx
Nov 8 at 11:12

well, when i add some elements to rejected, and open rejected tab... i see nothing, it doesn't work..
– German Varanytsya
Nov 8 at 11:14

This simple mechanism should work. In your example you are pushing index to the array, but reading objects, did you forget to add objects instead of index?
– Lanayx
Nov 8 at 11:17

add a comment |

up vote
0
down vote

favorite

i have problem with adding my element(card) from one tab to another...

enter image description here

this is my code
i am using 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>

here is the script

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

asked Nov 8 at 11:03

German Varanytsya

476

i have problem with adding my element(card) from one tab to another...

enter image description here

this is my code
i am using 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>

here is the script

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

javascript vue.js vuex vue-cli

asked Nov 8 at 11:03

German Varanytsya

476

asked Nov 8 at 11:03

German Varanytsya

476

asked Nov 8 at 11:03

German Varanytsya

476

asked Nov 8 at 11:03

German Varanytsya

476

asked Nov 8 at 11:03

German Varanytsya

476

Looks like you started correctly, just don't forget to remove card from medias array
– Lanayx
Nov 8 at 11:12

well, when i add some elements to rejected, and open rejected tab... i see nothing, it doesn't work..
– German Varanytsya
Nov 8 at 11:14

This simple mechanism should work. In your example you are pushing index to the array, but reading objects, did you forget to add objects instead of index?
– Lanayx
Nov 8 at 11:17

add a comment |

Looks like you started correctly, just don't forget to remove card from medias array
– Lanayx
Nov 8 at 11:12

well, when i add some elements to rejected, and open rejected tab... i see nothing, it doesn't work..
– German Varanytsya
Nov 8 at 11:14

This simple mechanism should work. In your example you are pushing index to the array, but reading objects, did you forget to add objects instead of index?
– Lanayx
Nov 8 at 11:17

Looks like you started correctly, just don't forget to remove card from medias array
– Lanayx
Nov 8 at 11:12

well, when i add some elements to rejected, and open rejected tab... i see nothing, it doesn't work..
– German Varanytsya
Nov 8 at 11:14

This simple mechanism should work. In your example you are pushing index to the array, but reading objects, did you forget to add objects instead of index?
– Lanayx
Nov 8 at 11:17

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

The problem is with the addRejected click handler.
Change the button to:

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

Also if you want the element to be removed from the medias array, add:

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

to the addRejected method

EDIT:

If you want the element to be visible in the rejected tab, you should remove the
v-bind="rejected" from the <el-tab-pane> and add a v-for for rejected.

Example:

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

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

add a comment |

up vote
0
down vote

It looks like you are attempting to push o.index which might not even be defined here.

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

If you want to push the object from medias you need to push o.

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

answered Nov 8 at 11:19

artoju

664

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53206425%2fhow-can-i-add-card-from-pending-tab-to-approved-vue-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

The problem is with the addRejected click handler.
Change the button to:

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

Also if you want the element to be removed from the medias array, add:

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

to the addRejected method

EDIT:

If you want the element to be visible in the rejected tab, you should remove the
v-bind="rejected" from the <el-tab-pane> and add a v-for for rejected.

Example:

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

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

add a comment |

up vote
1
down vote

accepted

The problem is with the addRejected click handler.
Change the button to:

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

Also if you want the element to be removed from the medias array, add:

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

to the addRejected method

EDIT:

If you want the element to be visible in the rejected tab, you should remove the
v-bind="rejected" from the <el-tab-pane> and add a v-for for rejected.

Example:

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

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

add a comment |

up vote
1
down vote

accepted

The problem is with the addRejected click handler.
Change the button to:

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

Also if you want the element to be removed from the medias array, add:

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

to the addRejected method

EDIT:

If you want the element to be visible in the rejected tab, you should remove the
v-bind="rejected" from the <el-tab-pane> and add a v-for for rejected.

Example:

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

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

The problem is with the addRejected click handler.
Change the button to:

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

Also if you want the element to be removed from the medias array, add:

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

to the addRejected method

EDIT:

If you want the element to be visible in the rejected tab, you should remove the
v-bind="rejected" from the <el-tab-pane> and add a v-for for rejected.

Example:

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

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

edited Nov 8 at 12:43

answered Nov 8 at 11:22

T. Dirks

578217

answered Nov 8 at 11:22

T. Dirks

578217

answered Nov 8 at 11:22

T. Dirks

578217

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

add a comment |

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

doesn't work still..maybe i didn't explain correctly
– German Varanytsya
Nov 8 at 11:30

i want to see added element inside Rejected tab!
– German Varanytsya
Nov 8 at 11:31

@GermanVaranytsya I have updated my answer, please take a look
– T. Dirks
Nov 8 at 12:43

add a comment |

up vote
0
down vote

It looks like you are attempting to push o.index which might not even be defined here.

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

If you want to push the object from medias you need to push o.

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

answered Nov 8 at 11:19

artoju

664

add a comment |

up vote
0
down vote

It looks like you are attempting to push o.index which might not even be defined here.

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

If you want to push the object from medias you need to push o.

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

answered Nov 8 at 11:19

artoju

664

add a comment |

up vote
0
down vote

It looks like you are attempting to push o.index which might not even be defined here.

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

If you want to push the object from medias you need to push o.

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

answered Nov 8 at 11:19

artoju

664

It looks like you are attempting to push o.index which might not even be defined here.

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

If you want to push the object from medias you need to push o.

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

answered Nov 8 at 11:19

artoju

664

answered Nov 8 at 11:19

artoju

664

answered Nov 8 at 11:19

artoju

664

answered Nov 8 at 11:19

artoju

664

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl