themblem/web/src/components/article-modal.vue
2024-09-01 21:51:50 +01:00

63 lines
1.3 KiB
Vue

<template>
<Modal ref="modal" close_only=1>
<div class="my-1" v-for="x, i in articles" :key="i">
<button class="btn btn-info select" @click="select(x)">选择</button>
<a :href="'/api/article/?id=' + x.id" target="_blank">
{{ x.title }}
</a>
</div>
<button class="btn btn-secondary" v-if="meta.previous" @click="load_data(meta.previous)">上一页</button>
<button class="btn btn-secondary" v-if="meta.next" @click="load_data(meta.next)">下一页</button>
</Modal>
</template>
<script>
export default {
name: 'ArticleModel',
props: [],
emits: ['select'],
components: {
},
data: function () {
return {
articles: [],
meta: {},
cb: null,
};
},
computed: {
},
methods: {
show: function(cb) {
this.cb = cb;
this.$refs.modal.show();
},
select: function(x) {
this.$refs.modal.hide();
this.$emit("select", x);
if (this.cb) {
this.cb(x.id);
}
},
load_data: async function(uri) {
if (!uri) {
uri = "/api/v1/article/";
}
var r = await this.$root.api_get(uri);
this.articles = r.data.objects
this.meta = r.data.meta;
},
},
mounted() {
this.load_data();
},
}
</script>
<style scoped>
button.select {
margin-right: 1rem;
}
</style>