Por defecto, la imagen de carga es verdadera después de completar la carga de la imagen de carga es falsa, pero después de actualizar el objeto de carga no hay ningún efecto a la vista, siempre muestre la barra de carga.

¿Dónde está mi error? Por favor ayude a cualquiera

Nota: pruebe también con esta función. $ NextTick (), misma salida;

En la consola la actualización que obtuvimos, pero sin efecto a la vista

Vue.config.devtools=false;
Vue.config.productionTip = false;

new Vue({
  el:"#app",
  data: {
    isloadingImage: [],
    property:{
      images:[]
    }
  },
  methods: {

    addFiles() {
      this.$refs.files.click();
    },

    handleFilesUpload() {
      let uploadedFiles = this.$refs.files.files;
      let maxLength = uploadedFiles.length <= 4 ? uploadedFiles.length : 4;
      for (let i = 0; i < maxLength; i++) {
        uploadedFiles[i].url = URL.createObjectURL(uploadedFiles[i]);
        this.property.images.push(uploadedFiles[i]);
      }
      this.uploadImages();
    },

    removeFile(key) {
      this.property.images.splice(key, 1);
      delete this.isloadingImage[key];
    },
    async uploadImages(){
      this.property.images.forEach((value, key) => {
        if (!this.isloadingImage[key]) {
          this.isloadingImage[key] = true;
          let myFormData = new FormData();
          myFormData.append('title', value);
          axios.post('http://localhost:800/uploadimage',
                     myFormData).then(response => {
            this.isloadingImage[key] = false;
           
          }).catch(error=> {
            
            this.isloadingImage[key] = false;
            console.log(this.isloadingImage);
          })
        }
      });
    }
  }
});
.small-image {
        max-height: 200px;
        max-width: 200px;
    }

    .post-image button {
        padding: 0 5px;
    }

    .post-image-preview {
        max-height: 105px;
    }

    .post-image .caption {
        max-width: 198px;
        height: 27px;
    }

    .lds-facebook {
        display: inline-block;
        position: relative;
        width: 64px;
        height: 50px;
    }

    .lds-facebook div {
        display: inline-block;
        position: absolute;
        left: 6px;
        width: 10px;
        background: #bfbebe;
        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }

    .lds-facebook div:nth-child(1) {
        left: 6px;
        animation-delay: -0.24s;
    }

    .lds-facebook div:nth-child(2) {
        left: 26px;
        animation-delay: -0.12s;
    }

    .lds-facebook div:nth-child(3) {
        left: 45px;
        animation-delay: 0s;
    }

    @keyframes lds-facebook {
        0% {
            top: 6px;
            height: 51px;
        }
        50%, 100% {
            top: 19px;
            height: 26px;
        }
    }
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <div class="field-title"><h5>Pictures</h5></div>

    <div class="form-group post-image">
        <div class="col-md-12">
            <div class="upload-btn-wrapper">
                <button class="add-photo" v-on:click="addFiles()"><i
                        class="fas fa-camera"></i></button>
                <input type="file" multiple id="file" ref="files"
                       v-on:change="handleFilesUpload()">
            </div>
            <div class="brows-image-text"><p>You can upload up to<br>4 pictures per
                listing</p></div>
        </div>

        <div class="row">
            <div v-for="(file, key) in property.images" class="col-md-3">
                <div class="lds-facebook" v-if="isloadingImage[key]">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div v-else>
                    <button v-on:click="removeFile( key )" type="button">
                        <i class="fas fa-times text-danger"></i>
                    </button>
                    <img :src="file.url" class="small-image post-image-preview">
                </div>
            </div>
        </div>

    </div>
</div>
0
Al-Amin 16 oct. 2018 a las 18:53

2 respuestas

La mejor respuesta

Vea la regla n. ° 2 aquí https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

Actualizas los valores de la matriz isloadingImage usando sus claves. En tal caso, para que el cambio sea reactivo, debe reemplazar toda su matriz después del hecho.

Ejemplo:

axios.post('http://localhost:800/uploadimage', myFormData)
  .then(response => {
    this.isloadingImage[key] = false;
    this.isloadingImage = this.isloadingImage.slice(0);
    // ^^^ this line
  }).catch(error=> {
    console.log('error', key, error)
    this.isloadingImage[key] = false;
    this.isloadingImage = this.isloadingImage.slice(0);
    // ^^^ and  line
  });
1
i-- 16 oct. 2018 a las 21:14

Utilice los datos como función, no como objeto como lo hace.

new Vue({
  el:"#app",
  data () {
    return {
      imageIsLoading: ...
0
Makarov Sergey 16 oct. 2018 a las 16:35