Javascriptが表示されずコンソールにUncaught DOMExceptionが出力される

質問

HTMLで作成したページに一部Vueで作成したコンポーネントを埋め込んでいるのですが、
ブラウザのコンソールに以下が出力され、コンポーネントを表示することができません。
'?'はvueファイル内では使用していないのですが、何が原因なのでしょうか？

エラー内容

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '?' is not a valid attribute name.

ソースコード

php
1<router-view name="page"></router-view>

vue
1<template>
2  <div>
3    <div class="">
4      <img
5        v-show="uploadedImage"
6        :src="uploadedImage"
7      >
8    </div>
9    <div class="">
10      <input
11        type="file"
12        name="file"
13        v-on:change="onFileChange"
14      >
15
16    </div>
17    <br>
18    <p>jpg、png、gif形式（1MB以内）</p>
19    <span
20      class="alert-danger"
21      role="alert"
22      v-for="error in errors"
23      :key="error.id"
24    >
25      {{ error }}<br>
26    </span>
27  </div>
28</template>
29
30<script>
31export default {
32  data() {
33    return {
34      uploadedImage: "",
35      errors: []
36    };
37  },
38  methods: {
39    onFileChange(e) {
40      this.errors = [];
41      let files = e.target.files || e.dataTransfer.files;
42      this.createImage(files[0]);
43      if (
44        !this.checkImageType(files[0].type) ||
45        !this.checkImageSize(files[0].size)
46      ) {
47        this.uploadedImage = "";
48      }
49    },
50    createImage(file) {
51      let reader = new FileReader();
52      reader.onload = e => {
53        this.uploadedImage = e.target.result;
54      };
55      reader.readAsDataURL(file);
56    },
57    checkImageType(type) {
58      if (type.match(/jpeg/) || type.match(/png/) || type.match(/gif/)) {
59        return true;
60      } else {
61        this.errors.push("Error1");
62        return false;
63      }
64    },
65    checkImageSize(size) {
66      if (size < 1048576) {
67        return true;
68      } else {
69        this.errors.push("Error2");
70        return false;
71      }
72    }
73  }
74};
75</script>
76
77<style scoped>
78</style>

環境

ブラウザ: Chrome
言語：　PHP（Laravel）、Javascript(Vue)

moredeep

2019/02/27 01:17

コンソールにエラーが出力されたということはHTMLは生成されているんですよね？HTML内に無効な？が含まれているかどうかは確認しましたか？そもそも、 >HTMLで作成したページに一部Vueで作成したコンポーネントを埋め込んでいるのであれば、埋め込まれるHTMLに原因がある可能性があるのですが。

poteto4401

2019/02/27 12:45

LaravelのBladeファイル内で記載しているHTMLは表示されております。 VueのTemplate内のHTMLが表示されないといった状況です。 Bladeファイル内にはPHPの条件式で'?'は使用していますが、Vueファイル内では使用していません。

moredeep

2019/02/28 01:34

>Bladeファイル内にはPHPの条件式で'?'は使用していますが、Vueファイル内では使用していません。そのBladeで使った？が最終的にHTMLに出力されてしまったりしませんか？という確認をしています。ソース上の話ではなく、生成された、ブラウザが表示しているHTMLのことです。 Scriptはエラーが発生した時点でそれ以降のScriptを実行しなくなることが多いです。VueのTemplateを表示するためのScriptが走る前にエラーが発生している場合、Vue側で何をしようと表示することはできません。一度、以下等を参考に、VueのTemplateを表示するだけのHTMLをローカルで作成し、表示できるか確認してみたらいかがでしょうか。そうすれば問題がどこにあるかの切り分けがしやすくなると思います。参考：https://qiita.com/sygnas/items/c0228eabbb3157766d5c

poteto4401

2019/03/01 05:37

> 一度、以下等を参考に、VueのTemplateを表示するだけのHTMLをローカルで作成し、表示できるか確認してみたらいかがでしょうかこれに関してなのですが、もともとローカル環境では表示されているのですが、本番環境では表示されず上記エラーが表示されます。ローカル開発でのコンソールにもエラーが表示されていないので困っています。どう解決すれば良いでしょうか？

moredeep

2019/03/01 09:45

本番環境でテストしているのですか？検証環境等ではなく？ともかく、ローカル環境では表示されており、本番環境では表示されないということは、ソースではなく環境周りに問題がある可能性が高いです。この質問では、Vueを主体に置いた質問のされ方をしており、Vueには問題なさそうに見えるため、回答が付かないんだと思います。 >ローカル環境では表示されているのですが、本番環境では表示されず上記エラーが表示されます。全く同じものを同じ構成で配置し、同じようにアクセスした結果が異なるのでしょうか？(ローカル環境は本番環境に限り無く近いものになっていますか？)もしもそうならばサーバやネットワーク周りが原因になっている可能性もあります。一度、何が原因なのかを調査するとよろしいかと思います。(PHP or JS or サーバ or ?)

poteto4401

2019/03/02 04:42

ありがとうございます。環境を疑ってみます。