1. 元の記事にサムネイルがあるかどうかで分岐する

まずは元の記事にサムネイルがあるかどうかで条件分岐します。
サムネイルがないのに、サムネイル変更ボタンがあったら不自然ですよね

というわけで、
サムネイルが無い場合 -> サムネイル選択ボタン
サムネイルがある場合 -> サムネイル表示 & サムネイル変更ボタン
という仕組みにしていきます！

2. 条件付きレンダリング

Vue を使用した開発なので、
v-if v-else を使って書いていきます。

サムネイルが無い場合

EditComponent.vue

<div
    v-show="reShow"
    v-if="images.length === 0"
    class="form-group"
>
    <label for="exampleFormControlFile1">サムネイル</label>
    <input
        type="file"
        ref="file"
        class="form-control-file"
        id="exampleFormControlFile1"
        name="imageData"
        accept="image/*"
        v-on:change="onFileChange"
    />
</div>

サムネイルがある場合

EditComponent.vue

<div v-else v-show="show" class="form-group">
    <label for="exampleFormControlFile1">サムネイル</label>
    <div v-for="(image, index) of images" :key="index">
        <img
            v-for="(image, index) of images"
            :key="index"
            :src="'/storage/image/' + image.image"
            style="width: 200px"
        />
        <button
            v-show="show"
            @click="resetThumbnail()"
            class="btn btn-outline-danger"
        >
            削除
        </button>
    </div>
</div>

<div v-for="(image, index) of images" :key="index">

これを使うために、blade 側で下記を定義します。

edit.blade.php

<edit-component 
    v-bind:post="{{ json_encode($post) }}"
    v-bind:images="{{ ($post->images) }}"
>
</edit-component>

これによって、
サムネイルが無い場合

サムネイルがある場合

こんな感じになります！

3. 削除後の動き

ただ、削除後も削除ボタンが残っていては不自然ですよね。
そのため、

<button
    v-show="show"
    @click="resetThumbnail()"
    class="btn btn-outline-danger"
>
    削除
</button>

このように v-show="show"を使い、
@click="resetThumbnail()"が作動したら
画像削除と同時に、this.show = !this.show; が走るようにしてあります。

EditComponent.vue

methods: {
    resetThumbnail(images) {
        this.show = !this.show;
        const id = this.images.map((item) => item.id);
    
        axios.delete("/images/" + id).then((res) => {
            console.log(res);
        });
    },

こんな感じです！

細かい部分は省略しましたが、大まかな流れを書いてみました！
どこか修正部分ありましたらコメントください...!

ブログ編集画面での画像表示

目次

1. 元の記事にサムネイルがあるかどうかで分岐する

2. 条件付きレンダリング

3. 削除後の動き