按下按鈕時不顯示小吃吧

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

      }

     }

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>