Vuejs数据绑定在图像源不工作

我有以下组件，我从Indexeddb（ArrayBuffer）读取数据并将其用作图像的源。当父组件使用此组件时，只有最后一个formUpload获取它的dataSource集。我的console.log告诉我数据在那里，URL.createobjecturl被成功创建，我可以在devtools中打开它们并查看图像，但它们没有被指定为图像的来源。有任何想法吗？Vuejs数据绑定在图像源不工作

<div class="ui grid segment" v-if="formData.Uploads.length > 0"> 
    <div class="four wide column" v-for="upload in formData.Uploads" style="position:relative;"> 
     <formUpload :upload="upload"></formUpload> 
    </div> 
</div> 

Vue.component("formUpload", { 
    props: ["upload"], 
    template: ` 
     <div class="ui fluid image"> 
      <a class="ui green left corner label"> 
       <i class="add icon"></i> 
      </a> 
      <a class="ui red right corner label" v-on:click="removeUpload(upload)"> 
       <i class="remove icon"></i> 
      </a> 
      <img style="width:100%;" :src="dataSource" /> 
      <div class="ui blue labels" v-if="upload.tags.length > 0" style="margin-top:5px;"> 
       <image-tag v-for="tag in upload.tags" :tagtext="tag" :key="tag" :upload="upload.id" v-on:deletetag="deletetag"></image-tag> 
      </div> 
     </div> 
    `, 
    data: function() { 
     return { 
      dataSource: undefined 
     } 
    }, 
    mounted: function() { 
     _this = this; 

     imageStore.getItem(_this.upload.imageId).then(function (result) { 

      console.log("Data gotten", result.data); 

      var dataView = new DataView(result.data); 
      var blob = new Blob([dataView], { type: result.type }); 

      console.log("Data transformed", blob); 

      _this.dataSource = URL.createObjectURL(blob); 

      console.log("DataUrl", _this.dataSource); 

     }); 

    }, 
    methods: { 
     removeUpload: function (upload) { 
      console.log("removeUpload"); 
     } 
    } 
});

来源

2017-04-23 Bildsoe

你需要一个key.https：//vuejs.org/v2/guide/list.html#key –

@RoyJ - 感谢 - 其实我试着这样做较早，但它没有工作，但现在我发现了原因。仅仅在组件上创建密钥是不够的，它也应该被包含在支持工作的道具中。你能创建一个答案吗？ – Bildsoe

总之，you need a key。

当Vue公司是更新由默认与v-for渲染，它的元素列表采用了“就地补丁”的策略。如果数据项目的顺序发生了变化，Vue将简单地修补每个元素，并确保它反映应该在该特定的索引处呈现的内容，而不是移动DOM元素以匹配项目的顺序。这与Vue 1.x中的track-by="$index"的行为类似。

此默认模式是有效的，但只适合当您的列表呈现输出不依赖于子组件状态或临时DOM 状态（例如形式输入值）。

建议尽可能为v-for提供一个键，除非迭代的DOM内容很简单，或者您故意依靠默认行为来提高性能。

这是一个相当普遍的“疑难杂症”，这应该由事实

在2.2.0+，使用v-for一个组件时，一个key现在需要得到帮助。

来源

2017-04-24 12:18:53

奇怪的是，我没有得到任何警告或任何东西，我使用的版本是2.2.2 – Bildsoe

Vuejs数据绑定在图像源不工作

回答

相关问题