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

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

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

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

TypeScript

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

Q&A

解決済

2回答

1681閲覧

Vue.jsで$routerを呼び出すときのthisが使えない

tenlife

総合スコア70

Vue.js

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

TypeScript

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

0グッド

0クリップ

投稿2021/05/29 03:19

編集2021/05/29 23:47

canvas要素をクリックした時に$routerでページ遷移する処理を書いています。

現状
vue.js をtypescriptで書いていますが、$routerを使うタイミングでthisに対してエラーが出ています。
thisに対してanyの型

error

1'this' implicitly has type 'any' because it does not have a type annotation.Vetur(2683)

vue

1<template> 2 <div class="container"> 3 <canvas id="myCanvas"></canvas> 4 </div> 5</template> 6 7<script lang="ts"> 8import { Component, Vue } from 'vue-property-decorator'; 9 10@Component 11export default class EarthMap extends Vue { 12 mounted(): void { 13 this.init() 14 } 15 init() { 16 const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#myCanvas') 17 canvasElement.addEventListener('click', handleMouseMove); 18 19 function handleMouseMove(event: any) { 20 this.$router.push('Home') 21 } 22 } 23} 24</script>

router

1import Vue from 'vue' 2import VueRouter, { RouteConfig } from 'vue-router' 3import Home from '../views/Home.vue' 4 5Vue.use(VueRouter) 6 7const routes: Array<RouteConfig> = [ 8 { 9 path: '/', 10 name: 'Home', 11 component: Home 12 }, 13] 14 15const router = new VueRouter({ 16 mode: 'history', 17 base: process.env.BASE_URL, 18 routes 19}) 20 21export default router 22

maints

1import Vue from 'vue' 2import App from './App.vue' 3import router from './router' 4 5Vue.config.productionTip = false 6 7new Vue({ 8 router, 9 render: h => h(App) 10}).$mount('#app')

いくつか参考にしながら試してみましたがうまくいきませんでした。
https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation

どなたか詳しい方、参考になるサイトを知っているかた、居ましたらご教授いただきたいです。
よろしくお願いします。

追記
https://qiita.com/eyuta/items/34fe3183f75afcd7eb12#noimplicitthis
https://www.typescriptlang.org/tsconfig#noImplicitThis
https://qiita.com/ryokkkke/items/390647a7c26933940470#noimplicitthis

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

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

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

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

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

guest

回答2

0

自己解決

結論 無名関数に変更する

function click_pin(): void {} 上記を下記に変更 const click_pin = () => {}

参考 https://future-architect.github.io/typescript-guide/function.html

もっと早く疑うべきでした。

投稿2021/05/30 00:02

tenlife

総合スコア70

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

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

0

もしかしたらもう試されているかもしれませんが、
下記はいかがでしょうか?

vue

1function handleMouseMove(this: any, event: any) { 2 this.$router.push('Home') 3}

投稿2021/05/29 23:32

m2l

総合スコア318

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

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

tenlife

2021/05/29 23:48 編集

m2lさん、回答ありがとうございます。 試してみましたが、うまくいきませんでした。 cosole.logで確認したところ、thisがundefinedになってしまっているのが原因かと思っています。
m2l

2021/05/29 23:53 編集

そうなんですね。 mountedではthis使える形ですか? それであれば、あまり良いやり方かはわかりませんが、 下記はいかがでしょう? ------------------------------- // 引数追加する this.init(this) ------------------------------- // 引数を入れる init(this: any) { const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#myCanvas') canvasElement.addEventListener('click', handleMouseMove); function handleMouseMove(event: any) { this.$router.push('Home') } } ------------------------------------------
tenlife

2021/05/30 00:00

コメントありがとうございます! 結論、無名関数を使用するとthisが使用できるようになりました! function click_pin(): void {} から下記に変更 const click_pin = () => {} コメントのおかげで、怪しい部分に気づけました。 ありがとうございました。 参考 https://future-architect.github.io/typescript-guide/function.html
m2l

2021/05/30 00:01

よかったです!(うまく回答できなくて申し訳ないです。。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問