<li v-for="people in projectData.employees" :key="people._id">
<b-img :src="colleagueImages(people)"
</li>
async colleagueImages(people) {
console.log(people); // => max@stackoverflow.com
let profileImage = await axios.get("http://myapilink.com/image?id=" + people + "&s=200&def=avatar", {
headers: {
'accept': 'image/jpeg'
}
});
console.log(profileImage);
return 'data:image/jpeg;base64,' + btoa(
new Uint8Array(profileImage.data)
.reduce((data, byte) => data + String.fromCharCode(byte), '')
);
}
console.log(profileImage) 返回以下内容:
使用我当前的代码,我只会在浏览器控制台中收到以下错误:
[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Promise.
请您参考如下方法:
由于您没有首先渲染所需的所有数据,因此必须随后更改属性。首先,您需要为您的项目使用 Vue 组件,因此您的“src”属性将是响应式的;其次,在渲染应用程序后启动对项目的请求。请查看此模型。
Vue.component('todo-item', {
template: `
<li>
<label>
<input type="checkbox"
v-on:change="toggle()"
v-bind:checked="done">
<del v-if="done">
{{ text }}
</del>
<span v-else>
{{ text }}
</span>
<span v-if="like">
♥ {{like}}
</span>
</label>
</li>
`,
props: ['id', 'text', 'done', 'like'],
methods: {
toggle: function(){
this.done = !this.done
}
}
})
let todos = [
{id: 0, text: "Learn JavaScript", done: false, like: null },
{id: 1, text: "Learn Vue", done: false, like: null },
{id: 2, text: "Play around in JSFiddle", done: true, like: null },
{id: 3, text: "Build something awesome", done: true, like: null }
]
const v = new Vue({
el: "#app",
data: {
todos: todos
}
})
todos.forEach((item) => {
// This is just a mock for an actual network request
window.setTimeout(() => {
item.like = Math.ceil(Math.random() * 100)
}, Math.random() * 2000)
})
https://jsfiddle.net/willywongi/gsLqda2y/20/
在此示例中,我有基本的待办事项列表应用程序,其中每个项目都有一个假的“喜欢”计数,该计数是异步计算的。设置我的应用程序后,我等待“like”属性值(在我的示例中,我只是等待毫秒的随机值)。