javascript - 如何将卡从“待处理”选项卡添加到“已批准”?Vue.js
问题描述
我在将元素(卡片)从一个选项卡添加到另一个选项卡时遇到问题...
这是我正在使用 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[] 的一种方法。请帮我解决这个问题!谢谢你!)
解决方案
问题出在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>
并添加v-for
for rejected
。
例子:
<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>
推荐阅读
- r - 减少使用 R markdown 生成的投影仪演示文稿中表格和标题之间的距离
- java - 发送带有附件的电子邮件时出错
- math - 偏离中心线旋转
- javascript - 画布Javascript中的随机扩展圆圈
- string - 如何在源代码中跨多行编写单行字符串文字
- c++ - C++ diff 是非类
- kubernetes-helm - 我可以从 helm hooks 运行的脚本中检索出来并将其用作另一个图表的输入吗?
- asp.net - ASP.NET MVC OpenId 与 Ajax 混合
- questdb - 如何使用 Python 将流入线路协议记录写入 QuestDB?
- html - 如何调整切换按钮的大小?