記事一覧みたいなページを作りたいです。
Q&A
Closed
目的
Vue3、Vutify3、Vue router3、piniaを用いてブログを作成しようとしています。
ブログの記事一覧ページを作成したいのですが、
きれいな作成方法が浮かびません。
下記に記載する現状とは異なる方法など、フロントに詳しい方のご意見がお聞きしたいです。
目標
下記画像のような各記事のタイトルを収集して記事一覧を表示できるようにしたいです。
現状
現状、piniaを使って記事リストをstate内に保存して、v-cardとv-forで表示しています。
画像のコードについては下記の通りです。
store_main.js
import { defineStore } from 'pinia';
export const useStoreMain = defineStore('store_main', {
state: () => ({
now_page: "home",
省略
job_article_card_list: [
{ card_name: '仕事関連記事_テスト1', card_path: 'job_article_test1' },
{ card_name: '仕事関連記事_テスト2', card_path: 'job_article_test2' },
],
}),
actions: {
update_now_page(update_page) {
this.now_page = update_page;
},
}
});
job_article_list.vue
<template>
<v-app>
<v-app-bar >
省略
</v-app-bar>
省略
<v-main>
<div class="md">
仕事関連の記事
</div>
<v-card v-for="job_article_card in StoreMain.job_article_card_list" :key="job_article_card.card_name"
:value="job_article_card.card_name" :to="{ name: job_article_card.card_path }" class="article_list">
{{ job_article_card.card_name }}
</v-card>
</v-main>
</v-app>
</template>
<script setup>
import { useStoreMain } from '@/stores/store_main';
const StoreMain = useStoreMain();
StoreMain.update_now_page("仕事関連の記事");
</script>
<script>
import profile_card from "@/components/profile_card.vue";
import adsense_card from "@/components/adsense_card.vue";
export default {
components: {
profile_card,
adsense_card,
},
}
</script>
<style>
.article_list {
width: 500px;
height: 300px;
margin: 2rem;
background-color: #f5f5f5;
}
</style>
0
