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

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

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

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

Q&A

解決済

2回答

352閲覧

クリック時にテキストを変更することはできたが画像の変更がうまくいきません。

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

0グッド

0クリップ

投稿2017/08/14 07:09

クリック時にテキストを変更することはできたが画像の変更がうまくいきません。
クリックしたときに画像を切り替えたかったのですが、なんの反応もありません。

vueの要素の指定の仕方は下記では間違っているのでしょうか?
(#vueHook2Img.url)
としたところがエラーになります。
ボタンを押したときに別の親要素にある二つの要素をいっぺんに変更したいのですが、

こちらのみエラーになります。
imgのidですがどのように指定するのでしょうか?

<div id="vueHook2Img"> <div> <figure> <div> <img v-bind:src="url" alt="当社のダミー商品"> </div> </figure> </div> </div> var app2 = new Vue({ el: '#vueHook2', data: { headding: '当社のダミー商品1つめを紹介します。', description1: '1. 当社のダミー商品1つめを紹介します。...', description2: '2. 当社のダミー商品1つめを紹介します。...', }, methods: { change2: function() { this.headding = '当社のダミー商品2つめを紹介します。'; this.description1 = '1. 当社のダミー商品2つめを紹介します。...'; this.description2 = '2. 当社のダミー商品2つめを紹介します。...'; }, change2Img: function() { #vueHook2Img.url = "img/common-img/t.jpg" } } });

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

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

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

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

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

guest

回答2

0

ベストアンサー

コードはこれで全部ですか?
多分全部ではないと思うのでなんとも言えませんが。。
とりあえず大体そんな感じで、
あとはchangeImgがどこかで呼ばれれば、changeImgのとこのurlに変わるかと思います。

あとはエラー内容を見てみないど難しいですね。

投稿2017/08/14 13:39

tashua314

総合スコア145

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

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

退会済みユーザー

退会済みユーザー

2017/08/15 02:40

ありがとうございます。 インスペクタを見ても特にエラーがありませんでした。 気になるのはネイティブjsでのeventlistenerの第一引数clickに該当する記載がないことです。 @click="change2"というものはhtmlにはつけていますが、Vue.jsの方には記載がありません。 下記の場合どこにつけるのでしょうか? <div id="vueHook2"> <p class="u-ta-c"><button id="changeBtn2" @click="change2">その他商品</button></p> </div> <div id="vueHookImg"> <div"> <figure class=""> <div class="p-filter"> <img v-bind:src="url" alt="当社のダミー商品"> </div> </figure> </div> </div> var appImg = new Vue({ el: '#vueHookImg', data: { url: "img/common-img/s.jpg" }, methods: { changeImg: function() { this.url = "img/common-img/a.jpg" } } });
tashua314

2017/08/15 04:06

`#changeBtn2`のクリック時に`changeImg`を呼びたいのであれば、 `@click="changeImg"`と記載すれば、呼べますよ
tashua314

2017/08/15 04:09 編集

いや、ちがった。 #changeBtn2はVue化されていない範囲なのでそれだけだとダメですね。 vue化されているのは#vueHookImg内なので。 #changeBtn2を#vueHookImgの中に入れるか、 双方を囲うdivを作成してそれをエレメントにするか。ですね。
退会済みユーザー

退会済みユーザー

2017/08/15 04:10

何度も大変ありがとうございます。 @click="change2"は恐らくネイティブjsで言う、イベントハンドラなのでしょうが。 Vue.jsにはeventlistenerはないのですね。 こちらにクリック時に実行してほしい関数名を記載すると記載した要素をクリックした際に関数が実行されるのですね。
退会済みユーザー

退会済みユーザー

2017/08/15 04:17

el: '#vueHookImg', こちらの中つまり子要素にフックのボタンも入っていないと絶対に使えないという事でしょうか? ネイティブjsよりかなり制限が多いようですね。 全く別親の要素の中にボタンと、変更する画像がないといけないという縛りがあるのでしょうか?
tashua314

2017/08/15 04:18 編集

> こちらにクリック時に実行してほしい関数名を記載すると記載した要素をクリックした際に関数が実行されるのですね。 そんなイメージですね! @clickがイベントハンドラ、それをイコールで繋いだ所に記載されるのがイベントリスナーなイメージですね。 なので、関数でなくとも、 @click="tmp = 1 + 1" とかも書けます。
退会済みユーザー

退会済みユーザー

2017/08/15 04:19

var appImg = new Vue({ el: '#vueHook2', data: { }, } }); 始めのdiv要素も上記のようにvueにしているのですが、やはり親要素が違うものはまったく別のvueの塊になってしまい互いに意思疎通することは不可能という事でしょうか?
退会済みユーザー

退会済みユーザー

2017/08/15 04:22

@click="tmp = 1 + 1" つまりクリックしたときに、イコールの右にある式を実行という事ですね。 eventlistener測りですね。
tashua314

2017/08/15 04:34

vueで操作するには操作対象となるものが同一エレメントの中に必要があります。 そのような場合はvueオブジェクトを別にするのではなく、 それぞれをコンポーネント化して同一vueオブジェクトに紐付ける方が良いかもですね。 https://jp.vuejs.org/v2/guide/index.html#コンポーネントによる構成 兄弟コンポーネント間でのやりとりは、イベント発火を使うのがシンプルかなと。 http://kuroeveryday.blogspot.jp/2016/10/vuejs-components-emit-events.html ※「親子関係にないコンポーネント間でデータを渡す」の項
退会済みユーザー

退会済みユーザー

2017/08/15 04:50

ありがとうございます。 恐らくこちらを行うのですね。 const vm = new Vue() // 値を受け取る側 vm.$on('non-parent-child-communication', (value) => { // 受け取ったvalueでいろんな処理 }) // 値を渡す側 vm.$emit('non-parent-child-communication', '渡したいデータ')
退会済みユーザー

退会済みユーザー

2017/08/15 05:00

今回の場合どちらが受け取る側になるのでしょうか? 恐らく<div id="vueHook2">が vm.$emit('non-parent-child-communication', '渡したいデータ') 渡したいデータ'はすべてそのままコピペしたらよいのでしょうか? // 値を受け取る側 <div id="vueHook2Img"> <div> <figure> <div> <img v-bind:src="url" alt="当社のダミー商品"> </div> </figure> </div> </div> 上記のvueのソースを vm.$on('non-parent-child-communication', (value) => { // 受け取ったvalueでいろんな処理 })
tashua314

2017/08/15 05:52

> 渡したいデータ'はすべてそのままコピペしたらよいのでしょうか? 「すべて」とはなんでしょうか? 受け取る側は、「変更したいというシグナル」だけ受け取ればよいのか、 「具体的な値」を受け取れば良いのか。 それは受け取る側が必要なものを渡して上げればOKです。 今回に限っては、渡す必要の在るデータは無いから最悪なにも渡さず、 受け取り側でchangeImgを実行するだけで大丈夫そうですが。
退会済みユーザー

退会済みユーザー

2017/08/15 06:08

const vm = new Vue() vm.$on('non-parent-child-communication', (value) => { el: '#vueHookImg', data: { url: "img/common-img/s.jpg" }, methods: { changeImg: function() { this.url = "img/common-img/a.jpg" } } }) これで問題ないでしょうか?
tashua314

2017/08/15 07:44 編集

ん~。。。 すみません、未だあまりきちんと理解できてないようなので、 シンプルな事からやっていきましょうか。 1.単一Vueオブジェクト内での操作 まずこれです。emitとかは忘れてください。 クリックするタグも置き換えるテキストも1つのVueオブジェクト内に入れてみましょう。 全てはここからです。 それが実現できたら、 2.Vue.componentの利用(親子間通信) 3.component間通信(emit利用) とかとか、発展版があるので、そちらに進むとよいかと思います。
退会済みユーザー

退会済みユーザー

2017/08/15 08:24

ありがとうございます。 var app2 = new Vue({ el: '#vueHook2', data: { heading: '当社のダミー商品1つめ', }, methods: { change2: function() { this.heading = '当社のダミー商品2つめ'; t }, data: { url: "img/common-img/a.jpg" }, methods: { change2Img: function() { this.url = "img/common-img/s.jpg" } } } }); <section id="vueHook2"> <div> <p class="u-ta-c"><button id="changeBtn2" @click="change2">その他商品</button></p> </div> <div id="vueHookImg"> <div"> <figure class=""> <div class="p-filter"> <img v-bind:src="url" alt="当社のダミー商品"> </div> </figure> </div> </div> </section> としてみたのですが文字は動くのですが画像が空になりかつクリックしても出現しませんでした。
tashua314

2017/08/15 08:34

問題とは関係ないですが、可読性・保守性を維持するため、 インデントをきちんと付けておきましょう。 問題としては、data: {} の記述やmethods: {} の記述が複数ありますね。 1つにまとめましょう。分けると片方が上書かれて消えます。 Vue.newに渡す引数はハッシュですので。 http://qiita.com/kidach1/items/651b5b5580be40ad047e あと、urlを設定してくれる予定?のchange2Imgがどこからも呼ばれていません。 これはどこで呼ばれたいのでしょうか?
退会済みユーザー

退会済みユーザー

2017/08/15 08:51

インデントはコメント欄では付けられません。 質問を編集したほうがいいという事でしょうか? change2Img();はネイティブならどこにおいても大丈夫ですが、vueの場合はどこに置くと良いのでしょうか?
tashua314

2017/08/15 09:36

あぁ、コメントだと付けれないんですね。 それは失礼しました。 付けれる所で書いてた時は付けてもらえれば良いです。 > change2Img();はネイティブならどこにおいても・・・ vueの場合もどこでに置いてもよいですよ。 というか、呼出側の話で認識されてます? 宣言は今の場所で良いです。 クリックされた時にこれを呼び出したいなら、 <button id="changeBtn2" @click="change2Img">・・・ というような形になるという事です。
退会済みユーザー

退会済みユーザー

2017/08/15 09:40

ありがとうございます。 とりあえず結果はおかげさまで出ました。 あとはお時間があれば疑問点を後ほど教えていただければ幸いです。 別質問にした方が良いでしょうか?
tashua314

2017/08/15 10:10

よかったです! そうですね。 個別に切り分けて質問してもらえれば。 もしくは、質問投げるよりもドキュメント読んだ方が基礎的な部分の理解は早いかもしれませんね。
退会済みユーザー

退会済みユーザー

2017/08/15 11:38

了解しました。ありがとうございました。
退会済みユーザー

退会済みユーザー

2017/08/16 01:18

いろいろと恐縮ですが、最後に下記だけ教えていただけませんでしょうか? >>> クリックされた時にこれを呼び出したいなら、 <button id="changeBtn2" @click="change2Img">・・・ というような形になるという事です。 `@clickはクリックしたときに、値に指定した関数を呼び出し実行するという事なのですね。 関数の呼び出しか必ず関数名()とscriptタグ内でよびださないといけないと思っていたのですが、 イベントハンドラで関数の呼び出しをしても良かったのですね。 ありがとうございました。
退会済みユーザー

退会済みユーザー

2017/08/16 01:24

ありがとうございました!!
guest

0

まず、エレメントの指定がjs側で間違ってます。

大外のdivにvueHook2ImgというIDを付けているのであれば、
el: "#vueHook2Img" とvueのエレメントを指定する事で、
#vueHook2Img内がvue化されます。

そして、url をbind名にしたのであれば、

data: { url: "urlの初期値設定" } methods: { change2Img: function() { this.url = "img/common-img/t.jpg" } }

というような形で、urlに値が設定されます。

投稿2017/08/14 07:45

tashua314

総合スコア145

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

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

退会済みユーザー

退会済みユーザー

2017/08/14 09:58

お返事ありがとうございます。 var app2 = new Vue({ el: '#vueHook2', data: { headding: '当社のダミー商品1つめを紹介します。', description1: '1. 当社のダミー商品1つめを紹介します。...', description2: '2. 当社のダミー商品1つめを紹介します。...', }, methods: { change2: function() { this.headding = '当社のダミー商品2つめを紹介します。'; this.description1 = '1. 当社のダミー商品2つめを紹介します。...'; this.description2 = '2. 当社のダミー商品2つめを紹介します。...'; }, data: { url: "urlの初期値設定" } methods: { change2Img: function() { this.url = "img/common-img/t.jpg" } } }); これで良いでしょうか?
退会済みユーザー

退会済みユーザー

2017/08/14 10:09

<div id="vueHookImg"> <div"> <figure class=""> <div class="p-filter"> <img v-bind:src="url" alt="当社のダミー商品"> </div> </figure> </div> </div> var appImg = new Vue({ el: '#vueHookImg', data: { url: "img/common-img/s.jpg" }, methods: { changeImg: function() { this.url = "img/common-img/a.jpg" } } }); こちらのようにやってみましたがうまくいっていないようです。 ソースが変わって恐縮ですが間違っていますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問