[英]vue.js prop does not get rendered in component
I am facing an issue with Vue.js prop rendering.我遇到了 Vue.js 道具渲染的问题。 I have two components:
poi-point-adder
one that dynamically creates children forms, and the form child one poi-component
(that gets created).我有两个组件:一个动态创建子 forms
poi-point-adder
和一个表单子poi-component
(被创建)。 This is how they look like:它们是这样的:
poi-point-adder
: poi-point-adder
:
var poiAdderComponent = Vue.component('poi-point-adder', {
data: function(){
return {
children: []
}
},
methods: {
add() {
this.children.push(poiComponent);
}
},
mounted: function () {
this.children = [];
},
template: `
<div>
<h1 class="title">Creator</h1>
<div>
<template v-for="(child, index) in children">
<poi-component :id="index"></poi-component>
</template>
</div>
<button class="button is-primary" @click="add()">+</button>
</div>
`
});
and和
poi-component
: poi-component
:
var poiComponent = Vue.component('poi-component', {
props: {
index: String
},
data: {
},
methods: {
},
template: `
<div :poi_index="index">
<p>Hi n {{index}}</p>
</div>`
});
The issue occurs with the second one.问题出现在第二个。 When I create new instances, the
index
prop does not get rendered (yet poi_index
is given the right index):当我创建新实例时,
index
道具不会被渲染(但poi_index
被赋予了正确的索引):
What am I doing wrong?我究竟做错了什么?
On the poi-component
you shouldn't be expecting the prop named index
, but id
.在
poi-component
上,您不应该期待名为index
的道具,而是id
。
And also: you don't need the <template></template>
around the component.而且:你不需要组件周围的
<template></template>
。
poi-component.vue poi-component.vue
var poiComponent = Vue.component('poi-component', {
props: {
id: String
},
data: {},
methods: {},
template: `
<div :poi_index="id">
<p>Hi n {{id}}</p>
</div>`
});
poi-point-adder.vue点加法器.vue
var poiAdderComponent = Vue.component('poi-point-adder', {
data: function(){
return {
children: []
}
},
methods: {
add() {
this.children.push(poiComponent);
}
},
mounted: function () {
this.children = [];
},
template: `
<div>
<h1 class="title">Creator</h1>
<div>
<!-- you are passing down the prop "id" with the
value of "index" -->
<poi-component
v-for="(child, index) in children"
:key="index"
:id="index"
></poi-component>
</div>
<button class="button is-primary" @click="add()">+</button>
</div>
`
});
More on this: https://v2.vuejs.org/v2/guide/components-props.html更多信息: https://v2.vuejs.org/v2/guide/components-props.html
If you make your prop required, you'll see the error/warning message if the passed prop's name is not correct (the example below is OK, so no error should be displayed):如果你使你的 prop 成为必需,如果传递的 prop 的名称不正确,你会看到错误/警告消息(下面的例子没问题,所以不应该显示错误):
poi-component.vue poi-component.vue
var poiComponent = Vue.component('poi-component', {
props: {
id: {
type: String,
required: true
}
},
data: {},
methods: {},
template: `
<div :poi_index="id">
<p>Hi n {{id}}</p>
</div>`
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.