如何在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,.1),.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>

loadData（）从数据库中获取所有数据：

data() {
return {
    existingImage:[],editMode: false,date: new Date().toISOString().substr(0,10),menu2: false,loading:false,allData:[]
};

}，

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

这是我在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,item.id)">
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>

在删除图像api时，调用如下，效果很好：

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

删除图像后，loadData（）函数从db获取所有更新的记录。但是在模态中，图像仍然存在。关闭模态并重新打开模态之后，删除的图像才会显示出来。删除图像后如何立即以b模式更新数据？或者如何在b-modal中观看现存图像的值更改和更新？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）