質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

解決済

【Vue.js/Vuetify/Vue CLI】v-forで作成したカードリストからのページ遷移方法

kuma_kuma0121
kuma_kuma0121

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

1回答

0グッド

0クリップ

2040閲覧

投稿2021/01/05 15:31

編集2021/01/05 15:41

環境

・Vue 2
・vue@cli 4.5.9
・Vuetify 2.4.0

###状況
・Vue CLI/Vuetifyを使った「フェス/ライブ情報まとめアプリ」をSPAとして開発中です。
・フリーワード検索機能は実装済みです。
computedオプション内のsearchResultプロパティで機能追加
<script>dataオプションにあるresultsプロパティに記述した内容を、<template>側の<v-card>v-forを回してリンクカードを作って検索結果を表示しています。
※Search.vue↓
Search.vueの画面

実現したいこと

検索結果表示時のリンクカード選択時に別のvueファイルへ遷移させたい
Search.vue(リンクカード選択)⇒Page1.vue(別ファイル)
※Page1ページ↓
Page1.vue

該当のソースコード

Search.vue(現在いる場所)

Vue

1 <v-col 2 cols="6" 3 md="8" 4 > 5 <v-card 6 class="pa-2" 7 tile 8 > 9 <div> 10 <h2>フリーワード検索</h2> 11 <div class="t-c-search"> 12 <v-col cols="12"> 13 <v-text-field 14 v-model="keyword" 15 label="キーワードを入力" 16 placeholder="" 17 filled 18 rounded 19 type="text" 20 ></v-text-field> 21 </v-col> 22 </div> 23 <v-divider></v-divider> 24 <h2 class="mt-4 mb-4">検索結果</h2> 25 <!-- <a :src="result.link"> --> 26 <a href="#"> 27 <v-card :loading="loading" class="mx-auto mt-2 mb-4" v-for="(result, key) in searchResult" :key="key"> 28 <div class="d-flex"> 29 <v-avatar class="ma-3" size="125" tile> 30 <v-img :src="result.imageUrl2"></v-img> 31 </v-avatar> 32 <div> 33 <v-card-title v-html="highLight(result.title)"></v-card-title> 34 <v-card-text> 35 <v-row align="center" class="mx-0"> 36 <v-rating :value="4.5" color="amber" dense half-increments readonly size="14"> 37 </v-rating> 38 <div class="grey--text ml-4"> 39 4.5 (413) 40 </div> 41 </v-row> 42 <div class="my-4 subtitle-1"> 43 </div> 44 <div v-html="highLight(result.content)"></div> 45 </v-card-text> 46 </div> 47 </div> 48 </v-card> 49 </a> 50 <div class="text-center"> 51 <v-pagination 52 v-model="page" 53 :length="4" 54 circle 55 ></v-pagination> 56 </div> 57 </div> 58 </v-card> 59 </v-col> 60 61<script> 62import Loading from '@/components/Loading' 63 64export default { 65 data:() => ({ 66 keyword: '', 67 results: [ 68 { title: '【失敗しない!】', 69 content: '初心者必見!フェスに持っていくもの10選!', 70 imageUrl2: require('../assets/images/top_image4.jpg'), 71 }, 72 { title: '【これだけ気を付けよう!】', 73 content: 'フェスを楽しむための注意点3選!', 74 imageUrl2: require('../assets/images/top_image4.jpg') 75 }, 76 { title: '【夏フェス必須!】', 77 content: 'あると便利なグッズを紹介!', 78 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 79 }, 80 { title: '【そもそも「邦ロック」とは?】', 81 content: '「邦ロックとはどんなジャンル?」について運営者個人的見解を述べます!', 82 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 83 }, 84 { title: '【これだけ気を付けよう!】', 85 content: 'フェスを楽しむための注意点3選!', 86 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 87 }, 88 { title: '【夏だけじゃない!】', 89 content: '寒いからこそフェス!屋内フェスの魅力をご紹介!', 90 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 91 }, 92 { title: '【どのフェス・イベントがいいの?】', 93 content: '初心者向けフェス・イベントをご紹介!', 94 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 95 }, 96 { title: '【完全攻略!】', 97 content: '初心者邦ロックロードマップ!', 98 imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png', 99 } 100 ], 101 }), 102 computed: { 103 searchResult(){ 104 let searchWord = this.keyword.trim() 105 if (searchWord === '') return this.results; 106 return this.results.filter(result => { 107 return result.title.includes(searchWord) || 108 result.content.includes(searchWord) 109 }) 110 } 111 }, 112 methods:{ 113 highLight(text){ 114 let searchWord = this.keyword.trim() 115 if (searchWord === '') return text 116 if(!text.includes(searchWord)) return text 117 const re = new RegExp(searchWord, 'ig'); 118 return text.replace(re,function(search){ 119 return '<span style="background-color:yellow; fontweight;bold">'+search + '</span>' 120 }) 121 } 122 }, 123}; 124

Page1.vue(遷移したいページ)

vue

1<template> 2 <div> 3 <h1>ここはPage1ページです。</h1> 4 </div> 5</template> 6 7<script> 8 export default { 9 data () { 10 11}, 12 } 13</script> 14 15<style> 16 17</style>

router.js(参考)

vue

1import Vue from 'vue' 2import VueRouter from 'vue-router' 3 4Vue.use(VueRouter) 5 6const routes = [ 7 { 8 path: '/', 9 name: 'Home', 10 component: Home 11 }, 12 { 13 path: '/search', 14 name: 'search', 15 component: () => import('../views/Search.vue') 16 }, 17 { 18 path: '/page1', 19 name: 'Page1', 20 component: () => import('../views/Page1.vue') 21 }, 22] 23 24const router = new VueRouter({ 25 mode: 'history', 26 base: process.env.BASE_URL, 27 routes 28}) 29 30export default router 31

試したこと

Searchページの以下コードを修正
<template>
リンクカードを作っている<a href="#"><a :src="result.link">に変更

<script>
dataオプション内resultsプロパティにlink:require('./Page1')追加

変更前↓

{ title: '【失敗しない!】', content: '初心者必見!フェスに持っていくもの10選!', imageUrl2: require('../assets/images/top_image4.jpg'), },

変更後↓

{ title: '【失敗しない!】', content: '初心者必見!フェスに持っていくもの10選!', imageUrl2: require('../assets/images/top_image4.jpg'),   link: require('./Page1') //←追加 },

残念ながらルーティングしませんでした。。。

補足情報(FW/ツールのバージョンなど)

・vue-routerの他のページへの遷移は<text to~>を使って実行できています。=router自体は正常に動いています。
resultプロパティに遷移させる何かを追加すれば解決できるはず。。。と思いましたが、解決できずです。。。

お忙しいところ申し訳ございませんがお力添えいただけますと幸いです。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

srcってhtmlのsrc要素になるだけなので、リンクにはなりません。

aタグでやるならhref要素にするか、
router-linkでできるんじゃないかな。
API リファレンス | Vue Router

投稿2021/01/06 05:41

szk.

総合スコア1396

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kuma_kuma0121

2021/01/06 10:39

szkさん、早速のご回答ありがとうございます。 〈router-link〉という選択肢は思いつきませんでした。 本日PCを修理に出してしまったので、明日試してみます。
kuma_kuma0121

2021/01/10 08:55

ご連絡が遅くなり大変申し訳ございません。 router-link :toを使うことで解決しました! 大変助かりました! ベストアンサーとしてクローズさせていただきます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。