我想在加载创建的方法之前加载/渲染道具。这样我就可以在vuejs中的创建方法上使用道具。这就是我做到的方式。但我创建的方法未接收到data.id。我该怎么办?预先感谢。
props:['data'],
data(){
return {
products:{},
abc:1,
}
},
created(){
axios.get(`/api/category/${this.data.id}`)
.then(res => this.products = res.data.data)
.catch(error => console.log(error.response.data))
console.log(this.data.id);
},
答案 0 :(得分:1)
我想您的道具data
是空的,因为您可以在created
函数中访问组件的道具。您可以仔细检查here
const buttonCounter = {
template:
`<span :style="itemColor">{{newID}}</span>`,
props: ['data', 'color'],
created: function () {
console.log('created ID', this.data.id)
this.newID = `created ${this.data.id}`
},
data: function () {
return {
animal: 'horse1',
newID: ''
}
},
computed: {
itemColor: function (){
return {
color: this.color,
'margin-right': '25px'
}
}
}
}
Vue.component("button-counter", buttonCounter );
new Vue({
el: "#databinding",
data: function() {
return {
colors: ["red", "yellow", "blue", "black", "grey", "green", "pink", "purple"],
dataSrc : [{ id: 'a1'}, { id: 'a2' }, { id: 'a3'}, { id: 'a4'}, { id: 'a5'}, { id: 'a6'}, { id: 'a7'}, { id: 'a8'}]
};
},
});
body {
margin: 20px;
}
.btn-wrapper {
display: flex;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
<div id="counter-event-example">
<div class="btn-wrapper">
<button-counter v-for="(item, index) in colors" :color="item" :data="dataSrc[index]" :key="item" ></button-counter>
</div>
</div>
</div>
答案 1 :(得分:0)
在安装组件之前,您应该等待数据可用。假设您在问题中定义的组件称为测试。您必须像这样使用它:
<Test :data="data" v-if="data.id"/>
通过这种方式,您可以确保您的数据始终在created()和mount()方法上可用。