i have problem with adding my element(card) from one tab to another...
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!)
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.