2021-02-25から1日間の記事一覧

v-ifで空配列時に表示を変える

Vue

<div v-if="article.length"> <p>記事は空ではありません</p> </div> <div v-else> <p>記事は空です</p> </div> 参考記事: 【Vue.js入門】v-ifを活用して空配列時にToDoアプリに「Todoはありません」と表示しよう! - Qiita

vuex-persistedstateでリロードしてもvuexのステートデータを保持

Vue

vuex-persitedstateをインストール $ vuex-persistedstate storeファイルにインポートして設定を記載 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' import articles from './modules/articles' i…

active_model_serializersで同じモデルから出力結果の違う2つのコントローラーを設定する

API

article_serializers.rb class ArticleSerializer < ActiveModel::Serializer attributes :id, :title, :description has_one :region has_many :info_blocks # article has one region, region has one countryの関連を返す。 class RegionSerializer < Act…

vue-routerで遷移時にデータを渡す

Vue

router { path: '/article', component: ArticleShow, name: 'ArticleShow', props: true } 遷移元 <script> export default { props: { article: { type: Object, required: true } }, methods :{ showArticleDetail() { this.$router.push({ name: 'ArticleShow', </script>…