Vue.jsでv-textではうまく働くのにマスタッシュタグでは動作しない

Vue.jsを勉強しています。練習のためじゃんけんケームを作ってみました。ところが一番基本で学んだマスタッシュが機能しません。試しにv-textを試したところうまくいきましたので根本的な間違いではないようです。なぜマスタッシュタグではうまくいかないのでしょうか？

Vue.component('jyanken-button', {
    // props:['hand'],
    template: `
    <button v-on:click="$emit('bt-clicked')"
    ></button>
    `
  })

let vm = new Vue({
    el: '#app',
    data: {
      hands: [
        { handEn: 'goo', handJa: 'ぐう', handImg: 'img/goo.jpg'},
        { handEn: 'tyoki', handJa: 'ちょき', handImg:'img/tyoki.jpg'},
        { handEn: 'paa', handJa: 'ぱあ', handImg:'img/paa.jpg'}
      ],

HTML

<jyanken-button
   v-for="hand in hands"
   v-bind="hand"
   v-on:bt-clicked="jyankenFn(hand)"
   v-text="hand.handJa"
   />

v-textを使用した上記コードではボタン内のテキストは想定通り「ぐう、ちょき、ぱあ」と表示されるのですが

<jyanken-button
   v-for="hand in hands"
   v-bind="hand"
   v-on:bt-clicked="jyankenFn(hand)"
   >{{hand.handJa}</jyanken-button>

のようにすると機能しません。自分なりに様々調べてみたのですがわかりません。エラーはでておらず画面からはボタンそのものが消えてしまいます。

もしかするとコンポーネント内のpropsの行はあっても無くても変化ありません。HTMLの中でhandを使っているので必要だと思ったのですがそうでもないようです。この辺の不理解が関係しているのでしょうか？理解の深い方からすると簡単かもしれませんがわかりません。何卒よろしく願いします。

sousuke

2020/06/28 22:17

{{hand.handJa}と閉じかっこがないのは貼り付けミスでしょうか？

jakecoffee

2020/06/29 12:59

貼り付けミスです。質問用に貼り付けるときに失敗したみたいです。投稿直前までいろいろ入れ替えていたもので。紛らわしくて申し訳ありません。ご教授のほどよろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

個人的にあんまりいいやり方じゃないのでなぜうまくいくのか、行かないのかはわからない。
私の中ではこういう風に書くほうが普通だと思っています。
なぜかpropsをコメントアウトされていますが…未検証です。
あとはslotを使ったりする想定だと思います。

vue
1Vue.component('jyanken-button', {
2    props:['hand'],
3    template: `
4    <button v-on:click="$emit('bt-clicked')"
5    >{{ hand.handJa }}</button>
6    `
7  })

コンポーネントはタグを一つしか書けないわけじゃないのでタグが複数あった場合とかに
どこに{hand.handJa}が出るべきかわからなくなりますよね？明示的に指定する方がいいと思います。

投稿2020/06/29 13:16

sousuke

総合スコア3830

jakecoffee

2020/06/29 14:14

``` Vue.component('jyanken-button', { props:['hand'], template: ` <button v-on:click="$emit('bt-clicked')" >{{hand.handJa}}</button> ` }) ``` ご回答ありがとうございます。また、間違いのご指摘ありがとうございました。実は私も最初はそう思ったんです。ですがうまくいかなくてHTMLの方にマスタッシュタグをいれてみてそれでもうまくいかなくてv-textで書いてみたらなぜかうまく行ったという感じなんです。心配なのでご指摘の方法を上再度試してみましたがうまくいきません。ボタンが３つとも消えてしまいます。上記はそのコードの写しです。 propsの件ですがこれも必要だと思って書いてたんですがあれこれ触ってみるうちに試しにコメントアウトしてみたらv-textで書いている状態なら支障なく動くんです。なのでpropsの使い方も私はどうやら理解不十分のようです。できればこの点も解決したいと思っています。できればもう少しお手伝いいただけると幸いです。よろしく願いします。

sousuke

2020/06/29 14:40

多分v-bind:hand="hand"です。プロパティのhandにhandを渡す感じです。あとv-forで回すときはv-bind:key="hand.handEn"とかつけたほうがいいです。

jakecoffee

2020/06/29 15:19

うまくいきました。ありがとうございます。m(_ _)m 回答へのコメントではMarkdownが効かないようなので見にくいと思いますが記載します。 HTML ``` <jyanken-button v-for="hand in hands" v-bind:hand="hand"　　　//ここを訂正しました v-bind:key="hand.handEn"　　　//追加しました v-on:bt-clicked="jyankenFn(hand)" ></jyanken-button> ``` js ``` Vue.component('jyanken-button', { props:['hand'],　　　//v-textではなく{{ }}のときはコメントアウトではダメなようです template: ` <button v-on:click="$emit('bt-clicked')" >{{hand.handJa}}</button>　　　//マスタッシュタグはこっちにいれました ` }) ``` でうまくいきました。本当にありがとうございます。できればご指摘の内容をもう少し噛み砕いていただけないでしょうか？また、試したところv-bind="hand"は props:['hand']と同様にv-text使用の状態で削除しても変わりませんでした。つまり機能はしていないが問題を起こしてもいなかったようです。これはなんでしょう？少しのことで動作しなくなるのに無視されるだけというのも理解できません。よろしく願いします。m(_ _)m

sousuke

2020/06/29 22:09

v-bind:xxxって「xxx属性にdata内の値を使いますよ、バインドしますよ」って意味なんです。だから<div :class="hand.handEn"></div>とかってやると html では<div class="goo"></div>みたいなタグになります。「:class」は「v-bind:class」の省略記法です。ではv-bind="hand"ではどうなるかというと…バインドする属性の指定がないので無視されてもしょうがないのでは？私は無視されても気にしませんが、どうしても気になるのであればvueはソース公開されているので調べればいいと思います。

jakecoffee

2020/06/30 07:22

けっこう腑に落ちてきました。「多分v-bind:hand="hand"です。プロパティのhandにhandを渡す感じです。」とご指摘いただいて少しづつ見えてきました。偶然というか混乱して hand を２つの目的で使っていてv-forの引数とpropsで指定した変数を区別できていませんでした。そもそもv-bindに属性を記述しないでいたのに気づきませんでした。 propsの方の変数を少し変えて２つのhandを区別するコードに書き換えて実行してみてうまくいったので関係性は理解がすすんだと思います。ありがとうございます。ただ、そもそも理解不十分で書いたコードがなぜか動作してしまったのが混乱を大きくしてしまったのですがその辺を理解したいです。試してみたところ最初の質問のコードのように <jyanken-button v-for="hand in hands" v-on:bt-clicked="jyankenFn(hand)" v-text="hand.handJa" ></jyanken-button> で想定どおりに動作してしまいます。jsの方ではpropsの定義もいりません。jsに{{ }}があるとかえって動作しなくなります。こうなるとvueインスタンスのなかのdataを自由に使えるのでpropsの存在意義がわからなくなります。jsファイルのcomponentの定義ではなくHTMLの中のタグ内への記述だから（つまり親側への記述だから）ということでしょうか？propはコンポーネントの定義内に使用するときだけに必要だと理解すればいいのでしょうか？だったら v-text="hand.handJa" ではなく {{ hand.handJa }} でもいいように感じますがそれでは動作しません。お手数をおかけしますができれば教えて下さい。よろしく願いします。m(_ _)m

行動規範の内容に同意します