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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1699閲覧

vue.jsでクリックで取得した値を別の場所にクリックして代入したい

zeijaku.net

総合スコア161

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/07 14:48

v-on:clickでクリックした場所の値を取得することは出来ているのですが
取得した値を別の場所にクリックで移したいと考えています。

vue.js

1<div id="tables"> 2 <table> 3 <tr> 4 <td v-on:click="m_board(board_1)">{{ board_1 }}</td> 5 <td v-on:click="m_board(board_2)">{{ board_2 }}</td> 6 <td v-on:click="m_board(board_3)">{{ board_3 }}</td> 7 </tr> 8 </table> 9 {{ have }} 10</div> 11 12<script> 13var tables = new Vue({ 14 el: '#tables', 15 data: { 16 have:'', 17 board_1:'○', 18 board_2:'', 19 board_3:'', 20 }, 21 methods: { 22 m_board: function (value,have) { 23 this.have = value 24 } 25 } 26}) 27</script>

左端のTDをクリックすると「○」を{{ have }}に入れる事が出来ます。
右端のTDをクリックした際に{{ have }}の値を入れれるようにしたいのですが、クリック時にboard_3認識する方法がわかりません。

v-on:clickにもう1つ追加して空であれば入れるようにすれば良いと考えているのですが、クリックした場所のイベント(ここでいうboard_3)をどうすれば認識出来るのかがわかりません。

やり方自体が間違っているのかもしれませんが、実現するためのヒントなどアドバイスいただければと思います。

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

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

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

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

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

guest

回答2

0

ベストアンサー

これでどうでしょうか?

html

1 <td v-on:click="m_board('board_1')">{{ board_1 }}</td> 2 <td v-on:click="m_board('board_2')">{{ board_2 }}</td> 3 <td v-on:click="m_board('board_3')">{{ board_3 }}</td>

投稿2019/01/08 00:14

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

zeijaku.net

2019/01/09 00:52

確認が遅れてしまい申し訳ありません。 こちら試してみました。 文字列として受け取ればよかっただけですので、実際の値の取得をv-onにもう1つ追加してmethod側で処理してやればいけそうです。 ありがとうございます。
guest

0

まず、m_boardの引数haveは現状使われていませんので必要ないですね。

その上で、現状のコードを最大限活用した方法としては、ブラケット記法を用いて、どのdataにアクセスするのかを指定することが考えられます。

html

1<div id="tables"> 2 <table> 3 <tr> 4 <td v-on:click="m_board(board_1, 'board_1')">{{ board_1 }}</td> 5 <td v-on:click="m_board(board_2, 'board_2')">{{ board_2 }}</td> 6 <td v-on:click="m_board(board_3, 'board_3')">{{ board_3 }}</td> 7 </tr> 8 </table> 9 {{ have }} 10</div> 11 12<script> 13var tables = new Vue({ 14 el: '#tables', 15 data: { 16 have:'', 17 board_1:'○', 18 board_2:'', 19 board_3:'', 20 }, 21 methods: { 22 m_board: function (value, target) { 23 if (!value) { 24 this[target] = this.have 25 } 26 this.have = value 27 } 28 } 29}) 30</script>

m_boardの第2引数に文字列を渡し、this[target]でアクセスしています。
ただ、個人的には、やや筋悪な感じがします。

下記のようにboard_1などをまとめて配列にするほうが、データ構造が明確になりますし、v-forも使えるのでベターでしょう。

html

1<div id="tables"> 2 <table> 3 <tr> 4 <td v-for='(value, index) in boardVals' v-on:click="m_board(value, index)">{{value}}</td> 5 </tr> 6 </table> 7 {{ have }} 8</div> 9 10<script> 11var tables = new Vue({ 12 el: '#tables', 13 data: { 14 have:'', 15 boardVals: ['○', '', ''] 16 }, 17 methods: { 18 m_board: function (value, index) { 19 if (!value) { 20 this.boardVals[index] = this.have 21 } 22 this.have = value 23 } 24 } 25}) 26</script>

投稿2019/01/08 00:09

7Kreuz

総合スコア112

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問