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

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

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

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Q&A

解決済

1回答

1012閲覧

vue.jsのChromeとIE11での動作の違いについて

zeijaku.net

総合スコア161

Vue.js

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

0グッド

1クリップ

投稿2017/12/23 02:17

vue.jsで出来るだけシンプルに書いたつもりですが、下記のコードがブラウザーによって動作が異なります。

<html lang="ja"> <head> <meta charset="utf-8"> <title>vue.js</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="sample"> <div>{{count}}</div> <button v-on:click="click">click</button> </div> <script> var char = new Vue ({ el: "#sample", data: { /* Default Val */ count: 100 }, methods: { /* User Click*/ click(){ this.count = this.count - 1 } } }) </script> </body> </html>

ボタンをクリックすると数が減っていくだけのものですが、ChromeとFirefoxでは正常に動きますがIE11だと数字の表示部分が{{count}}とそのままの表示になります。
IEの開発者ツールでは

SCRIPT1003: ':' がありません。 ファイル: sample.html、行: 24、列: 10

と表示されいます。
実際に「:」を追加しても問題は解決しないのですが、上記のコーディングのどこに問題があるのかが分かりません。
vue.jsでのコーディング作法が間違っているんだと思いますが、IE11でもChromeやFirefoxでも動作するにはどの部分に問題があるのかご指摘いただけると助かります。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Vue.JS公式のメソッドの書式をして修正すれば正常に動作しました。

質問に提示した通りのソースだとIE11でエラーになってエラーメッセージからリンクへ飛ぶと3項式(条件?A:B)と解釈したために起きてるエラーだとわかります。
つまり、文法が間違っているのをブラウザが頑張って解釈しようとしているためにブラウザによって挙動が違うってだけのようなので、文法を正しく記述すれば問題なしという感じのようです。

JavaScript

1// メソッドのところだけ抜粋 2 click: function(){ // この行が間違い 3 this.count = this.count - 1; // 個人的に文末のセミコロンは忘れないでほしい 4 }

JSのフレームワークでよくある連想配列としてメンバーを設定するやり方になるため、key:内容の形で指定する必要があります。

投稿2017/12/23 02:40

len_souko

総合スコア1337

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

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

zeijaku.net

2017/12/23 02:54

3項の扱いと言われば確かにそうですね・・・ お恥ずかしい限りです。 Chromeのみで作っていたので気づきませんでした。 むしろ解釈の幅が広いChromeの盲点だったかもしれません。 原因も分かりましたし改善もして助かりました。 公式と照らし合わせて進めていきたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問