Javascript 如何更新b-modal Vue中的数据/观察阵列长度的变化和更新？

我有一张有产品清单的桌子。单击每行上的“编辑”按钮，将弹出bootstrap vue中使用的b模式，并显示图像阵列： 这是我的b模式：

<b-modal size="xl" scrollable 
  id="productModal"
  ref="productModal"
  v-bind:title="this.editMode ? 'Update Product' : 'Add new Product'"
>

  <form ref="productForm" @submit.stop.prevent="handleSubmit">
    <v-app>
      <v-container fluid >
          <v-row dense>
            <v-col
              v-for="(item,index) in this.existingImage"
              :key="item.id"
              :cols="item.flex"
            >
              <v-card>
                
                <v-img
                  :src="item.url"
                  class="white--text align-end"
                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                  height="200px"
                >
                  <v-card-title v-text="item.id">aas</v-card-title>
                </v-img>
                
    
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn icon @click="deleteExistingImage(index,form.id,item.id)">
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>

        <v-file-input multiple chips required
        v-model="image" accept="image/*" @change="onFileChange" 
        label="File input" :error-messages="imageErrors"
        @input="$v.image.$touch()"
            @blur="$v.image.$touch()"></v-file-input>

        
     
    </v-container>
    </v-app>
  </form>
  <template v-slot:modal-footer>
        <div class="w-100">
            <b-button :disabled="loading"
            variant="primary"
            size="sm"
            class="forHover float-right"
            @click.prevent="submitForm(editMode)"
        >
                <div class="lds-ring-container" v-if="loading">
                    <div class="lds-ring"><div></div><div></div><div></div></div>
                </div>
                    Save
                
            </b-button>

            
        </div>
    </template>
</b-modal>

},

这是我在Vue中以editForm传递数据的代码：

editModal(row){
    this.editMode = true;
    this.existingImage = row.image;
    this.form.id = row.id;
    this.$bvModal.show('productModal');
    this.form.fill(row);
},


<v-container fluid >
          <v-row dense>
            <v-col
              v-for="(item,index) in this.existingImage"
              :key="item.id"
              :cols="item.flex"
            >
              <v-card>
                
                <v-img
                  :src="item.url"
                  class="white--text align-end"
                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                  height="200px"
                >
                  <v-card-title v-text="item.id">aas</v-card-title>
                </v-img>
                
    
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn icon @click="deleteExistingImage(index,form.id,item.id)">
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>

---

删除映像后，loadData（）函数从数据库中获取所有更新的记录。但在模态中，图像仍然存在。关闭模式并重新打开后，才会显示删除的图像。一旦图像被删除，我如何更新b模式中的数据？或者，我如何在我的b模式中观察现有图像值的变化和更新？

你能展示一下你是如何改变这个现有图像的吗。请添加loadData函数和相应的数据键，其中是

？@Hiws我已更新我的code@Sølve toreøe更新了我的代码

loadData() {
      ProductDataService.getAll()
        .then(response => {
          this.isloading = false;
          this.allData= response.data[0].data;
        })
        .catch(e => {
          console.log(e);
        });
    },

editModal(row){
    this.editMode = true;
    this.existingImage = row.image;
    this.form.id = row.id;
    this.$bvModal.show('productModal');
    this.form.fill(row);
},


<v-container fluid >
          <v-row dense>
            <v-col
              v-for="(item,index) in this.existingImage"
              :key="item.id"
              :cols="item.flex"
            >
              <v-card>
                
                <v-img
                  :src="item.url"
                  class="white--text align-end"
                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                  height="200px"
                >
                  <v-card-title v-text="item.id">aas</v-card-title>
                </v-img>
                
    
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn icon @click="deleteExistingImage(index,form.id,item.id)">
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>

ProductDataService.deleteImage(productId, imageId)
            .then(response => {
                this.loadData();
                this.$toasted.success('Product Image deleted!', {
                    action: {
                        onClick: (e, toastObject) => {
                            toastObject.goAway(0);
                        }
                    }
                })
            })