Question

我有一条summary路由，其中每个嵌套路由都有一个包含无线电组的标头。

我在summary.vue页面文件夹的根目录中使用了<nuxt-child>，以显示每个嵌套路由的标题。

pages/summary.vue

<template> 
  <v-flex xs12 sm12 md12 class="pt-0 pb-0">
    <v-divider></v-divider>
    <v-card flat color="grey lighten-5" class="pr-0 pl-0">
      <v-card-title>
        <v-layout row wrap>
          <v-flex xs12 sm10 class="subheading text-uppercase" >
            Summary 
            <v-icon>arrow_right</v-icon>
            <strong>{{getTitle}}</strong>
          </v-flex>                                               
            <radioButton :radios="getRadios" v-if="showRadios" :model="display"/>
            <titleText :titleTexts="getTitleText" v-if="showTitleText" />
          <v-flex xs12 sm2 class="text-sm-right">
            <v-btn color="primary">
              DOWNLOAD
            </v-btn>
          </v-flex>
        </v-layout>  
      </v-card-title>
    </v-card>                
    <v-divider></v-divider>           
    <nuxt-child/>
  </v-flex>
</template>
<script>

radioButton.vue

<template>
  <v-flex xs12 sm6>
            <v-radio-group v-for="(radio,index) in radios" class="mt-0" row :key="index" v-model="mutableModel">
              <v-radio :label="radio.label" :value="radio.value" color="primary"></v-radio>
            </v-radio-group>
  </v-flex>
            </template>
<script>
export default {
  props: {
    radios: {
      type: Array
    },
    model: {
      type: String
    }
  },
  data: function() {
    return {
      mutableModel: this.model
    }
  }
}
</script>

根据单选按钮的选择，将使用v-if在嵌套路由中显示一些html。如何正确使用绑定到无线电组的模型？我的意思是，如何将其传递给初始模型以及如何在用户单击单选按钮后取回值？

Answer 1

您可以在mutableModel的{{1}}上放一块手表，并发出radioButton.vue，这会更新input中的display

summary.vue

here，您可以检查watch: { mutableModel: function (val) { this.$emit('input', this.mutableModel) }, }的工作方式

vue如何将模型传递给组件并取回选择值？

1 个答案: