![](/img/trans.png)
[英]Vue.js how to launch axios.get in component after click on parent dropdown button?
[英]Vue.js: Return image with method after axios.get
<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警告]:道具无效:道具“ src”的类型检查失败。 期望的字符串,得到了承诺。
由于没有一开始就需要呈现的所有数据,因此之后必须更改属性。 首先,您需要为项目使用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”属性值(在我的示例中,我仅等待毫秒的随机值)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.