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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1764閲覧

vue.jsのcomputedプロパティによるgetter,setterの実装について

Den2884

総合スコア1

Vue.js

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/06/17 00:27

前提・実現したいこと

vue.jsを用いて、フォームに入力したフルネームを姓と名に分けて表示するリアクティブシステムを作成しています。
下記のコードは実行時正常に表示されますが、既に入力されている名前(下記コードの場合は" 太郎")を消去すると、"テスト"という文字列が自動で補完されてしまいます。
この振る舞いに関して詳しい原因が分かる方がいらっしゃいましたら、ご教示いただきたいです。

該当のソースコード

html

1<div id="app"> 2 <input type="text" v-model="fullName"/> 3 <div>fullName :{{fullName}} </div> 4 <div>firstName:{{firstName}}</div> 5 <div>lastName :{{lastName}}</div> 6</div> 7 8<script> 9 let vm = new Vue({ 10 el : '#app', 11 data(){ 12 return { 13 firstName:'テスト', 14 lastName:'太郎' 15 } 16 }, 17 //算出プロパティ 18 computed:{ 19 fullName:{ 20 get(){ 21 return this.firstName + ' ' + this.lastName 22 }, 23 set(val){ 24 let names = val.split(' ') 25 this.firstName = names[0] 26 this.lastName = names[names.length -1] 27 } 28 } 29 } 30 }) 31</script>

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

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

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

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

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

guest

回答2

0

javascript

1this.lastName = names[names.length -1]

でnames.length -1 が 0になるからでは?

投稿2021/06/17 00:55

sousuke

総合スコア3828

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

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

Den2884

2021/06/17 05:35

回答ありがとうございます。 names[1]になると思いこんでました。 おかげで解決することが出来ました。
guest

0

ベストアンサー

set(val){ let names = val.split(' ') this.firstName = names[0] this.lastName = names[names.length -1]

「太郎」とその1つ前の半角スペースを削除すると names = ['テスト'] になって
firstName もlastName も  names[0]になるからじゃないですかね。

this.lastName = names.length > 1 ? names[names.length -1] : ""

としてみるとか?

投稿2021/06/17 00:42

編集2021/06/17 00:48
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Den2884

2021/06/17 05:34

確かにそうですね。 splitの仕様をしっかりと把握出来ていませんでした。 代替案までいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問