質問
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)
回答2件
あなたの回答
tips
プレビュー