Question

我想在加载创建的方法之前加载/渲染道具。这样我就可以在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);
    },

Answer 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>

Answer 2

在安装组件之前，您应该等待数据可用。假设您在问题中定义的组件称为测试。您必须像这样使用它：

<Test :data="data" v-if="data.id"/>

通过这种方式，您可以确保您的数据始终在created（）和mount（）方法上可用。

如何在vue js上的所有其他方法之前渲染道具

2 个答案: