javascript - 按下按钮时未显示小吃栏

Question

我正在使用 vuetify 小吃店在用户单击按钮时显示错误消息。单击按钮时，将调用 signup() 并检查单选按钮是否选择了性别。如果未选择性别，则 this.gender 为 0，应显示小吃店。我发现小吃店并不总是显示。不确定是什么问题。有什么帮助吗？

    <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

      }

     }

标签： javascriptvue.jsvue-componentvuex

Answer 1

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

这是一个工作示例： https ://codepen.io/p2s/pen/zYrxGox

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>