Question

我有一个名为 Stepper 的父组件，其中包含名为 ShortSummary 的子组件。我试图通过单击单选按钮将道具从 Stepper 传递到 ShortSummary 。但这不起作用！这就是我所做的。这是步进器：

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

这是简短摘要：

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

当前它显示 voltage 为空白。我希望 Voltage: ${this.voltage} 显示从 Stepper

上的单选按钮选择的电压值

Answer 1

在data可用之前初始化组件的this对象，因此this.voltage未定义。

相反，将您的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>

如何在Vuejs中将道具从父母传递给孩子

1 个答案: