函数完成后的VueJS渲染

如何解决函数完成后的VueJS渲染

所以我有这个问题：我在VueJS中获得了此组件：

<img v-bind:src="'data:image/jpg;base64,'+ filesData[posts[file.index].id]" class="image" />

这是在for指令之内

<div v-for="file in files" :key="file.name" style="width: 30%; height: auto;">

所以这里一切都很好。在相同的内部，我有一个函数用来为filesData数组提供正确的数据。该函数如下：

getEachFile: function(id){
  console.log(id)
  setTimeout(function(){},500);
  this.axios({
    method: 'get',url: 'http://' + this.$store.state.server + ':3000/post/' + id,headers:{
      'authorization': this.$store.state.token
    }
  }).then((response) => {
      var bytes = response.data.data.data;
      this.filesData[id] = this.encode(new Uint8Array(bytes),id);
  })
}

因此，我正在向本地服务器发送HTTP请求。本地服务返回一个包含图像数据的缓冲区。您可以看到在响应中我调用了另一个函数这就是该函数（用于转换为base64）

encode: function(input,id) {
  var keyStr = "ABCDEFGHIJKLMnopQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var output = "";
  var chr1,chr2,chr3,enc1,enc2,enc3,enc4;
  var i = 0;

  while (i < input.length) {
      chr1 = input[i++];
      chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index 
      chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
          enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
          enc4 = 64;
      }
      output += keyStr.charat(enc1) + keyStr.charat(enc2) +
                keyStr.charat(enc3) + keyStr.charat(enc4);
  }
  return output;
}

一切都很好，但是问题是函数编码完成执行后，'img'组件/标签没有再次呈现。当我在互联网上搜索时，我已经意识到使用类似的东西：

this.filesData[id] = 'something'

不会强制组件重新渲染，我必须使用该Vue.set（）但是，使用Vue.set（）强制重新渲染会创建无限循环，该函数调用在'for'指令中处于蜂鸣状态。有什么方法可以使用这些值设置filesData数组，并且在这些值准备好仅重新呈现“ img”组件之后？如果没有，该函数执行后如何呈现这些标记？

更新：我已经完全将for指令放在这里

<!--"For" used to display 6 posts. Files variable stores the files from HTTP response.-->
<div v-for="file in files" :key="file.name" style="width: 30%; height: auto;">

  <div>{{getEachFile(posts[file.index].id)}}</div>
  <!--Each post is displayed using a dialog template,so when you click one of the images,a dialog Box is open.-->

  <v-dialog
    v-model="dialog[file.index]"
    height="auto"
    max-width="800"
  >
    <!--Here starts the activator for the dialog Box. The activator si the entire post.-->
    <template v-slot:activator="{ on,attrs }">
      <!--The following is the entire flex item described by the css from App.vue-->
      <div class="flexitem"
           v-bind="attrs"
           v-on="on"
      >
        <postName :file="file" :posts="posts"/>
        <description :file="file" :posts="posts"/>
        <img v-bind:src="'data:image/jpg;base64,'+ filesData[posts[file.index].id]" class="image" />
      </div>
    </template>

    <dialogBox :file="file" :posts="posts" :filesData="filesData"/>
  </v-dialog>
</div>

解决方法

之所以发生这种情况，是因为您没有更新file数组中的实际files对象。如果是这种情况，则组件将正确地重新渲染，因为您已为每个组件分配了唯一的key道具。

在这种情况下，最好的解决方案是只使用forceUpdate。您可以按以下方式在全局（Vue.forceUpdate()）或本地调用它：

getEachFile: function(id){
  console.log(id)
  setTimeout(function(){},500);
  this.axios({
    method: 'get',url: 'http://' + this.$store.state.server + ':3000/post/' + id,headers:{
      'authorization': this.$store.state.token
    }
  }).then((response) => {
      var bytes = response.data.data.data;
      this.filesData[id] = this.encode(new Uint8Array(bytes),id);
      this.$forceUpdate(); // calling it after encode 
  })
}

有medium post关于强制组件重新渲染。我认为这可能会有所帮助。