vue.js多图像上传不呈现

Question

我正在尝试使用vue.js创建多个图片上传。一切似乎都很好。但是，当我添加图像时，html不会呈现我选择的图像缩略图列表。更重要的是，我在我的控制台中得到了奇怪的输出。

这是我的HTML代码：

skip-character-set-client-handshake

这是我的脚本代码：

<v-layout row>
  <v-flex xs12 sm6 offset-sm3>
     <v-btn raised class="primary" @click="onPickImageList">Upload Image</v-btn>
     <input
       type="file"
       style="display: none"
       ref="fileInputList"
       accept="image/*"
       multiple
       @change="onImageListPicked">
  </v-flex>
</v-layout>

<v-layout row valid-v-if="imageList">
  <v-flex xs12 sm6 offset-sm3 v-bind="image in imageUrlList" >
       <img :src="image" height="150">
  </v-flex>
</v-layout>

}

data () {
return {
  imageList: [],
  imageUrlList: []
}

这是输出：

我应该修复什么，渲染我所选图像的缩略图列表？ 提前谢谢。

Answer 1

您应该使用v-bind="image in imageUrlList"，而不是v-for="image in imageUrlList"，

此外，我没有看到使用Array.prototype.push.apply(...)

的原因

使用vue，你应该避免这样做，因为你不会触发反应数据来改变DOM。

简单地说：

this.imageList.push(selectedFiles);