htmlをビューにappendする際に要素の中に@changeもしくはv-on:を追加したい。

Question

laravelで画像の複数枚投稿を実装しています。

解決したいこと：　新しく作るhtml要素に@changeもしくはv-onをつける。

現状：　html要素として表示されてしまう。発火しない。

現在は写真を追加した際に新しいinput要素を作るようにしています。
そのイベントの発火でvue.jsの@changeを使用しています。
しかし、新しく追加するinput要素に@change をうまく付与することが出来ません。
削除の部分も同様です。

<div class="form-group" id="image">
  <label for="photo">写真</label>
  <input type="file" name="src" @change='onFile'>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  new Vue({
            el: '#image',
            data: {
                photos: [],
                fileIndex: [1,2,3]
            },
            methods: {
              buildinput(index) {
                  let html = `<div data-index="${index}" class="js-file_group">
                                <input type="file" name="src[${index}]" @change='onFile'>
                                <div class="js-remove" @change='delete_image'>削除</div>
                              </div>`
                  return html;
                },
              
              onFile(e) {
                this.photos = e.target.files
                $('#image').append(this.buildinput(this.fileIndex[0]))
              },
              delete_image(){
                console.log('テスト')
              }            
            }
          })
</script>

書き方の問題な気がするのですが、正しい記述方法が見つけられませんでした。

どなたか知恵を貸していただけないでしょうか？
よろしくお願いします。

laravel6.18
vue 2.6.11

Comments

[zushi0905]

$('#image').append(this.buildinput(this.fileIndex[0]))
↑この書き方ってjQueryじゃないですかね？

[tenlife]

ご指摘ありがとうございます。
templateで用意して、v-htmlで出すという流れで認識あっていますでしょか？
https://qiita.com/Yorinton/items/a0144c34e4edb0777493#15props%E3%81%AB%E6%B8%A1%E3%81%95%E3%82%8C%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92templatemethodsupdated%E7%AD%89%E3%81%A7%E4%BD%BF%E3%81%86

引数等は上記のサイトのようなイメージでしょうか？
引数等の渡し方で参考になるようなサイトをご存知であれば教えていただけますでしょうか？

[zushi0905]

templateを用意してというか、html部分がもうtemplateなんで。。。
v-htmlというか双方向データバインディングでphotosをvueオブジェクトの中に持たせて、あとはレンダリングはライフサイクルに委ねてレンダリング走らせればいいだけです。
簡単にいうと、jQueryで実装する形だとデータを取得して整形して出力するのに対して、Vueは出力はもともと決めてあって、データを格納する変数に入れてあげるだけって感じです。

引数はjqueryと同じでイベントとして使っているメソッドは引数にイベントオブジェクトを渡され、普通のメソッドとして定義しているものはphpと同じような関数です。

[tenlife]

返信ありがとうございます。
提示していただいたやり方と全く同じではないかもしれませんが、双方向データバインディング考え方参考にさせていただきました。

<div class="form-group">
<div>
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
</div>
<div v-if="images">
<ol>
@{{images}}
<li v-for="(image, index) in images">
<h5>@{{image.name}}</h5>
<img :src="image.thumbnail" style="width: 100px; height: 100px;" />
<input type="hidden" v-model="image.name">
<div @click="edit(index)">Edit image</div>
<div @click="remove(index)">Remove image</div>
</li>
</ol>
</div>
</div>

data() {
return {
images: []
}
},
methods: {
onFileChange(e) {
let files = e.target.files
this.createImage(files[0])
},
createImage(file) {
let obj = {};

const reader = new FileReader();

reader.onload = (e) => {
obj.thumbnail = e.target.result;
obj.name = file.name

this.images.push(obj)
};
　　　　　　reader.readAsDataURL(file);
},

Answer 1

vueとjQueryは共存させることは可能ですがこの書き方だとダメですね。
photos をv-forでループさせる形にしてjQueryを外すべきです。

Comments

[tenlife]

提示された方向で作成し直したところ、photosに格納することができました。
ありがとうございました！

Answer 2

下記のような流れでimagesに格納することができました。

photosからimagesに変更されています。

<div class="form-group">
      <div>
        <h2>Select an image</h2>
        <input type="file" @change="onFileChange">
      </div>
      <div v-if="images">
          <ol>
              <li v-for="(image, index) in images">
                <h5>@{{image.name}}</h5>
                <img :src="image.thumbnail" style="width: 100px; height: 100px;" />
                <input type="hidden" v-model="image.name">
                <div @click="edit(index)">Edit image</div>
                <div @click="remove(index)">Remove image</div>
              </li>
          </ol>
      </div>
    </div>

　　　　　　　data() {
              return {
                images: []
              }
            },
            methods: {
              onFileChange(e) {
                let files = e.target.files
                this.createImage(files[0])
              },
              createImage(file) {
                let obj = {};
                const reader = new FileReader();
                reader.onload = (e) => {
                    obj.thumbnail = e.target.result;
                    obj.name = file.name
                    this.images.push(obj)
                };
                reader.readAsDataURL(file);
              },