Vueボタンをクリックするとフォームが送信されます

Question

ユーザーが画像をアップロードできるコンポーネントがありますが、画像を削除する機能も追加したいと思います。私は現在のイメージを削除するボタンを追加しましたが、問題はフォームが提出されていることです、そして、私はそれを避けたいと思います。現在のイメージがあれば削除するだけです。私は、画像を削除した後、再び、それはアップロードされません同じものをアップロードしようとした場合、私は、その後、removeImage方法でevent.preventDefault()を配置してみましたが、している

<template> 
    <div class="Image-input"> 
     <div class="Image-input__input-wrapper"> 
      <h2>+</h2> 
      <input @change="previewThumbnail" class="Image-input__input" name="image" type="file"> 
     </div> 

     <div class="Image-input__image-wrapper"> 
      <i v-show="! imageSrc" class="icon fa fa-picture-o"></i> 
      <img v-show="imageSrc" class="Image-input__image" :src="imageSrc"> 
      <button v-show="imageSrc" @click="removeImage">Remove image</button> 
     </div> 
    </div> 
</template> 
<script> 
export default { 

    props: ['imageSrc'], 

    methods: { 
    previewThumbnail: function(event) { 
     var input = event.target; 

     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     var vm = this; 

     reader.onload = function(e) { 
      vm.imageSrc = e.target.result; 
     } 

     reader.readAsDataURL(input.files[0]); 
     } 
    }, 
    removeImage: function removeImage(e) { 
     this.imageSrc = ''; 
    } 
    } 
} 
</script> 

：これはスクリプトです。それについて何をすべきか分かりませんか？

Answer 1

フォーム内にボタンがある場合、デフォルトタイプは「submit」です。起きてからそれを防ぐためには、次のようにtype="button"を設定する必要があります：

<button type="button" v-show="imageSrc" @click="removeImage">Remove image</button> 

参考：Can I make a <button> not submit a form?

編集：＃5

に＃1のコメントで述べた第二の問題のためのソリューションreader.onloadの機能を次のように変更してください：

reader.onload = function(e) { 
    vm.imageSrc = e.target.result; 
    console.log("Clearing file input"); 
    document.querySelectorAll('input[type=file]').forEach(element => { 
     element.value = ""; 
    }); 
} 

ご覧のとおり、コンソールログを出力してデバッグ（これを削除できます）し、次にすべてのファイル入力を選択してその値をリセットします。選択したファイルがクリアされます。

注：このクリア機能は、ファイルをメモリに読み込んだ後に発生します。削除機能でそれをしたい場合は、次のように行うことができます：

removeImage: function removeImage(e) { 
    this.imageSrc = ""; 
    console.log("Clearing file input"); 
    document.querySelectorAll('input[type=file]').forEach(element => { 
     element.value = ""; 
    }); 
} 

選択はあなた次第です、あなたはメモリに、またはあなたが画面上にそれを維持したい場合は読んだ後、ファイル名をクリアするかどうか。それが動作するかどうか私に教えてください！

別のメモ：あなたのアプリに他の<input type="file">がある場合、それでもクリアされます。しかし、私はそれをメモリに読み込んで、それをいくつかのローカル変数に保存していたと仮定します。これを避けるには、document.querySelectorAll関数を修正して、クラスまたはIDを指定して関連する入力のみを対象にする必要があります。