Javascript 按下按钮时快餐店不显示

我使用vuetify快餐店在用户单击按钮时显示错误MSG。单击按钮时，将调用signup（）并检查单选按钮是否选择了性别。如果未选择性别，则此.gender为0，应显示快餐店。我发现snackbar并不总是显示出来。不知道问题出在哪里。有什么帮助吗

    <v-radio-group v-model="gender" row>
  <v-radio name="type"  label="male" value="1" ></v-radio>
  <v-radio name="type"  label="female" value="2"></v-radio>
</v-radio-group>


    <v-snackbar
      v-model="warningSnackbar"
    >
      Please fill all elements in form!
      <v-btn
        color="pink"
        text
        @click="warningSnackbar = false"
      >
        Close
      </v-btn>
    </v-snackbar>



      data(){
  return{
   warningSnackbar:false,
   gender:0


   }}



     signup(){

 if(this.gender === 0){

       this.warningSnackbar= true

      }

     }

请在表格中填写所有元素！
接近
数据（）{
返回{
警告：错，
性别：0
}}
注册（）{
如果（this.gender==0）{
此.warningsnakbar=true
}
}

您的代码看起来不错，也许代码的另一部分会改变行为

这里有一个工作示例：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
警告：错，
性别：0
}),
方法：{
注册（）{
console.log（“注册”+this.gender）
如果（this.gender==0）{
此.warningsnakbar=true
}
}
}
})
提交
请在表格中填写所有元素！
接近

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    warningSnackbar:false,
    gender:0
  }),
  methods: {
    signup(){
      console.log("signup " + this.gender)
      if (this.gender === 0){
        this.warningSnackbar= true
      }
  }
  }
})

<div id="app">
  <v-app id="inspire">
    <div class="text-center ma-2">
      <v-radio-group v-model="gender" row>
        <v-radio name="type" label="male" value="1" ></v-radio>
        <v-radio name="type" label="female" value="2"></v-radio>
      </v-radio-group>
      <v-btn dark @click="signup()">Submit</v-btn>

      <v-snackbar
        v-model="warningSnackbar"
      >
        Please fill all elements in form!
        <v-btn
          color="pink"
          text
          @click="warningSnackbar = false"
        >
          Close
        </v-btn>
      </v-snackbar>
    </div>
  </v-app>
</div>