Javascript 如何将卡从“待定”选项卡添加到“已批准”?Vue.js
我无法将我的elementcard从一个选项卡添加到另一个选项卡 这是我的密码 我正在使用vue cliJavascript 如何将卡从“待定”选项卡添加到“已批准”?Vue.js,javascript,vue.js,vuex,vue-cli,Javascript,Vue.js,Vuex,Vue Cli,我无法将我的elementcard从一个选项卡添加到另一个选项卡 这是我的密码 我正在使用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-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>
所以!
我决定简单地创建一个名为approved的大型元素,并将我的元素推到那里。
但我不明白我是否做对了。。。
“mock_det”是我的json文件,其中包含卡的数据。
addRejected是一种将数据推送到rejected[]的方法。
请帮我解决那个问题!
谢谢大家! 看起来您正在尝试推送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>
问题在于addRejected click处理程序。
将按钮更改为:
<el-button type="text" @click="addRejected(o)" class="hide-reject-button">REJECT</el-button>
添加拒绝的方法
编辑:
如果希望元素在“拒绝”选项卡中可见,则应删除
v-bind=从中拒绝,并为拒绝添加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>
看起来你们的开始是正确的,只是别忘了从MediaArraywell中移除卡,当我向rejected添加一些元素并打开rejected选项卡时。。。我什么也看不见,它不起作用。这个简单的机制应该能起作用。在您的示例中,您正在将索引推送到数组中,但是正在读取对象,您是否忘记添加对象而不是索引?仍然不起作用..可能我没有正确解释我希望在拒绝选项卡中看到添加的元素@GermanVaranytsya我已经更新了我的答案,请看一看
<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>