[英]How to pass a prop from parent to child in Vuejs
I have a parent component called Stepper which contains this child component called ShortSummary . 我有一个名为Stepper的父组件,它包含名为ShortSummary的子组件。 I am trying to pass a prop from Stepper to ShortSummary by clicking on a radiobutton.
我试图通过点击radiobutton将步进器中的道具传递给ShortSummary 。 but it doesn't work!
但它不起作用! Here's what I have done.
这就是我所做的。 This is Stepper :
这是步进器 :
<v-radio-group row v-model="voltage" >
<v-radio
v-for="n in radioNames"
:key="n"
:label="n"
:value="n"></v-radio>
</v-radio-group>
<app-short-summary :voltage="voltage" ></app-short-summary>
<script>
import ShortSummary from "./ShortSummary";
data() {
return {
voltage:'',
radioNames:
['24V to 36V',
'48V to 72V',
'96V to 110V']
},
components:{
appShortSummary: ShortSummry
}
}
</script>
and this is ShortSummary : 这是ShortSummary :
<v-list-tile
:key="item.title"
avatar
ripple
@click="toggle(index)">
<v-list-tile-content>
{{item.action}}
</v-list-tile-content>
</v-list-tile>
<script>
export default {
props:['voltage']
data () {
return {
selected: [2],
items: [
{
action: `Voltage: ${this.voltage}`
},
{
action: 'Weight: POOF'
},
{
action: 'Size: BOOM'
},
{
action: '2oo2? Need the logic document'
},
{
action: 'Price: Very very expensive'
}
]
}
},
}
</script>
currently it shows voltage as blank. 目前它显示电压为空白。 I want
Voltage: ${this.voltage}
to show the value of voltage selected from the radiobutton on Stepper 我想要
Voltage: ${this.voltage}
来显示从步进器上的Voltage: ${this.voltage}
按钮中选择的电压值
Component's data
object is initialized before this
is available, hence this.voltage
is undefined. 组件的
data
对象初始化之前this
是可用的,因此this.voltage
是不确定的。
Instead make your items
as computed prop. 而是将您的
items
作为计算道具。
<script>
export default {
props:['voltage']
data () {
return {
selected: [2],
}
},
computed: {
items() {
return [
{
action: `Voltage: ${this.voltage}`
},
{
action: 'Weight: POOF'
},
{
action: 'Size: BOOM'
},
{
action: '2oo2? Need the logic document'
},
{
action: 'Price: Very very expensive'
}
]
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.