初心者・Vue.jsを用いた名前入力フォームの実装に関して
Q&A
Closed
名前入力フォームが空欄の時だけエラーを表示させたい
現在Vue.JS３のOptions APIを利用して
「名前入力フォームが空欄の時はエラーを表示させ、そうでないときにはエラーを非表示にする」
というコードの実装に取り組んでいます。
すでに書かれているコードの上に追記をしているのですが、
入力されている文字「name」の状態の管理がうまく行きません。
現在エラー表示が出たままで、inputフォームに入力をしても
エラーが非表示にならず困っています。
①data（）での入力内容「name」の初期化、
②methodsでの関数定義、
③v-bindで関数とエラー表示の紐付け
④v-modelでの「name」の状態管理
⑤keyupイベントによるエラー表示のイベント発生を書いたのですが
何か間違いがあるみたいです。長い時間考えても改善されないため
皆様のアドバイスをいただきたく思います。
発生している問題・エラー
現在のコード（Messegeに関するコードが元々書かれていたものです）
Vue.js
import Message from '../Message.vue'
export default {
name: "Message",
components: { Message },
props: {
mode: {
type: String,
default: 'input'
}
},
data() {
return {
name:""
}
},
methods:{
isNameUnInputed(){
if(this.name){
return false
}else{
return true
}
},
onKeyup(){
this.isNameUnInputed
}
}
}
HTML
<td>
<input-text :エラー表示の関数="!isNameUnInputed" v-model = "name" @keyup = "onKeyup" />
</td>
0