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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

2回答

1309閲覧

Vue.js 処理が複数回呼ばれる

kakedashidesu

総合スコア50

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/07/10 07:46

vue.jsを使って開発をしています。
/userにアクセスしたときにqueryパラメータ({ count: '2', type: ['blue', 'green'] })を設定していて、
countSetting()の処理でcountの数によってどこのページに遷移させてあげるのかを決めています。
最初はcountが0なのでtype[0]のblueがthis.statuseに設定されてusers/blueに遷移します。blueページで何かしら処理が終わったら
blueページから/usersにcountを渡してあげてgetUsers()の処理の this.count = parseInt(this.$route.params.count)で取得しています。

/usersのページが呼ばれたときに処理が複数会呼ばれていてconsole.log('test')でみてみたところtestが3回表示されていました。
どうしてなのでしょうか?
わかる人がいましたご教授お願いいたします。

<template> <div class="center-column"></div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class UsersPage extends Vue { count: number = 0 statuse: any = '' mounted() { this.$router.replace({ query: { count: '2', type: ['blue', 'green'] } }) } console.log('test') this.getUsers() this.TransitionUrl() } getUsers() { this.count = parseInt(this.$route.params.count) if (!isNaN(this.count)) { this.countSetting() } else { this.count = 0 this.countSetting() } } countSetting() { this.statuse = this.$route.query.type[this.count] this.count += 1 } TransitionUrl() { switch (this.statuse) { case 'blue': this.BlueUrl() break case 'green': this.GreenUrl() break } } CareerUrl() { this.$router.push({ name: 'users-blue', params: { count: this.count.toString() } }) } MatchUrl() { this.$router.push({ name: 'users-green', params: { count: this.count.toString() } }) } }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

まず、エラーを解消する前に・・・・
getUsersmethodsですよね?
裸で定義されているのでmethodsに定義してあげるのが良いと思います。

投稿2020/07/25 11:43

FrontEnd_Japan

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FrontEnd_Japan

2020/07/25 13:53

失礼しました。 間違った回答をしました。一旦は上の回答は無視してください。
guest

0

nuxt.jsでも使ってるんですかね?
vue.jsを何で動かしているかによって回答も変わってくるので今のままではなんとも言えません。

投稿2020/07/10 12:21

mackintosh

総合スコア228

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kai0310

2020/07/10 13:05

それは回答ではなく質問への追記・修正、ベストアンサー選択の依頼で言うべき内容では?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問