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

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

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

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

TypeScript

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

Q&A

解決済

2回答

2339閲覧

[Vue3][TypeScript][ESLint] Setup構文のpropsが"'props' is assigned a value but never used"になる

ivokarlovic

総合スコア1

Vue.js

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

TypeScript

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

0グッド

0クリップ

投稿2023/01/06 07:37

コード

LoginForm.vue

1<script setup lang="ts"> 2type Props = { 3 username: string; 4 password: string; 5}; 6 7type Emits = { 8 (e: "username-change", value: string): void; 9 (e: "password-change", value: string): void; 10 (e: "click"): void; 11}; 12 13const props = defineProps<Props>(); 14 15const emit = defineEmits<Emits>(); 16 17function handleUsernameChange(event: Event): void { 18 if (!(event.target instanceof HTMLInputElement)) { 19 return; 20 } 21 emit("username-change", event.target.value); 22} 23 24function handlePasswordChange(event: Event): void { 25 if (!(event.target instanceof HTMLInputElement)) { 26 return; 27 } 28 emit("password-change", event.target.value); 29} 30 31function handleClick(): void { 32 emit("click"); 33} 34</script> 35 36<template> 37 <v-container> 38 <v-text-field 39 :value="username" 40 label="ユーザー名" 41 @input="handleUsernameChange" 42 ></v-text-field> 43 <v-text-field 44 :value="password" 45 label="パスワード" 46 type="password" 47 @input="handlePasswordChange" 48 ></v-text-field> 49 <v-btn color="primary" @click="handleClick">ログイン</v-btn> 50 </v-container> 51</template>

事象

13行目のprops'props' is assigned a value but never used.eslint@typescript-eslint/no-unused-varsと怒られてしまいます。

補足

※ eslintrc.js内にてvue/script-setup-uses-varsは設定済みで、その他の変数や関数はnot usedが表示されなくなりましたが、typeとの噛み合わせが悪いのか(?)、propsのみ上記Lintエラーが出てしまいます。

eslintrc.js

1// rules内 2"vue/script-setup-uses-vars": "error"

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

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

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

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

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

guest

回答2

0

ベストアンサー

では13行目を
「const props = 」の部分を取って、

defineProps<Props>();

だけにしてみたらどうでしょうか

投稿2023/01/19 04:27

donkuri

総合スコア81

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

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

ivokarlovic

2023/01/30 06:42

こちらでうまく動作しました!ありがとうございます。
guest

0

投稿者の補足

props.usernameのようにすれば一応Lintエラーが出なくなるのですが、これは書き方としてどうなのでしょうか。。。propsを用いているのが明示的で良い気もするのですが。。。

<v-text-field :value="props.username" label="ユーザー名" @input="handleUsernameChange" ></v-text-field> <v-text-field :value="props.password" label="パスワード" type="password" @input="handlePasswordChange" ></v-text-field>

投稿2023/01/06 07:41

編集2023/01/06 07:41
ivokarlovic

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問