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

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

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

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

Microsoft Edge

Microsoft Edgeは、マイクロソフト社が開発する新しいWebブラウザです。Windows 10から標準搭載されており、Internet Explorerとは違うレンダリングエンジンが採用されています。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

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

解決済

VueがChrmeでは正常に動作するがEdgeでは動作しない

tima0314
tima0314

総合スコア32

Vue.js

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

Microsoft Edge

Microsoft Edgeは、マイクロソフト社が開発する新しいWebブラウザです。Windows 10から標準搭載されており、Internet Explorerとは違うレンダリングエンジンが採用されています。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

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

1回答

0評価

0クリップ

357閲覧

投稿2022/01/22 02:45

Vue.jsがEdgeで動作しません

vue初学者です。vue.jsを用い簡単な画像切り替えを行えるプログラムを書きました。ローカル環境なのですが
Chrmeでは正常に動作するのですが、Edgeでは正常に動作しません。

挙動

class"thumb"をクリックすると<!--main-->の部分の画像が切り替わる用になっています。
なぜでしょうか?
以下がソースコードです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>アルバムアプリ</title> <style> section img { max-width: 100%; } .center { margin: 0 auto 0 auto; max-width: 90%; width: 500px; } ul { display: flex; margin: 0; padding: 0; list-style-type: none; } li { flex: 1 1 auto; margin-right: 6px; } li:last-of-type { margin-right: 0; } </style> <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script> </head> <body> <div id="app"> <div class="center"> <div> <img :src="imgSrc" id="bigimg"> <!--main--> </div> <ul> <li><img src="./img/thumb-img1.jpg" class="thumb" data-image="./img/img1.jpg"></li> <li><img src="./img/thumb-img2.jpg" class="thumb" data-image="./img/img2.jpg"></li> <li><img src="./img/thumb-img3.jpg" class="thumb" data-image="./img/img3.jpg"></li> <li><img src="./img/thumb-img4.jpg" class="thumb" data-image="./img/img4.jpg"></li> </ul> </div> </div> <script src="main.js"></script> </body> </html>
Vue.createApp({ data: function () { return { imgSrc: "./img/img1.jpg", } }, computed: { Thumbs: function () { const data = this; const thumbs = document.querySelectorAll('.thumb'); console.log(thumbs); thumbs.forEach(function (item, index) { item.onclick = function () { console.log(this.dataset.image); data.imgSrc = this.dataset.image; } }) } }, }).mount('#app')

環境

vue3.0
vsコード

試したこと

vueの教材をもっていましてその教材のコードはEdgeで動作するのですが、この私の考えたコードはEdgeで動作しません。
Edgeで確認すると、画像は表示されますので(<!--main-->の部分)":src"が有効になっていると考えるとVueそのものがおかしのではなく、”computed”のソースコードがあやしいと睨んでいます。たぶん”onclick”のあたり。。。

わかるかたお助けください

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

sousuke

2022/01/22 02:53

教材のコードはどのようになっているんですか?提示した方がいいと思います。
maisumakun

2022/01/22 06:46

・Edgeのバージョンはいくつですか? ・ブラウザコンソールにエラーは出ていませんか?
tima0314

2022/01/22 07:52

edgeは最新版です。 コンソールには”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.” であとは何も表示されません。 先ほどわかったのですが、chrmeでもリロード直後はjavascriptは動作しておらず、chrome拡張のvue.devtoolsを立ち上げるとjavascriptが動作するという不可解な現象がおきております。
tima0314

2022/01/22 07:56

教材のコードではなく私のオリジナルコードです。 edge自体に原因があるのではと教材のコードを試したのですがそれはしっかり動作しました。
tima0314

2022/01/23 00:10

maisumakunさんもありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Microsoft Edge

Microsoft Edgeは、マイクロソフト社が開発する新しいWebブラウザです。Windows 10から標準搭載されており、Internet Explorerとは違うレンダリングエンジンが採用されています。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

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