javascript - Bu hatayı alıyorum: Tanımsız olanın 'length' özelliği okunamıyor

Nuxt ile bir uygulama geliştiriyorum (Vuetify 2 ve TypeScript kullanarak).

Benim radyo düğmelerim var (örneğin b1 b2) ve metin alanlarım var (örneğin t1 t2 t3).

Kullanıcı b1'e tıkladığında, t1 ve t3'ü gösterir

Kullanıcı b2'ye tıkladığında, t2 ve t3 görünür.

Bence t1 alanı için doğrulama bir hataya neden oluyor ama nedenini tam olarak bilmiyorum.

Kullanıcı sayfayı açtığında, b1 varsayılan olarak seçilidir.

B2'ye geçtiğimde ve bir şeyler yazdığımda... sonra B1'e geri döndüğümde, hiçbir şey olmuyor. İstediğim gibi çalışıyor.

b2'ye geçip sonra hiçbir şey yazmadan b1'e geri döndüğümde, Cannot read property 'length' of undefined hatası alıyorum.

İlk başta bu hatayı aldığımı düşündüm çünkü id tanımsızdı ama id için varsayılan değer 'test' ve test verisi b1'e geri döndüğümde zaten başlatılmış durumda, bu yüzden kafam karıştı...

İşte benim basitleştirilmiş kodum:

<template>
  <v-app>
    <v-container justify="center">
      <v-card flat width="400" class="mx-auto mt-5 mb-6">
        <v-card-text>
          <v-form v-model="isFormValid" class="pa-3">
            <v-radio-group v-model="testdata.type" row>
              <v-radio label="b1" value="b1"></v-radio>
              <v-radio label="b2" value="b2"></v-radio>
            </v-radio-group>
            <v-text-field v-if="testdata.type == 'b1'" v-model="testdata.id" counter :rules="[rules.required, rules.id]" />
            <v-text-field v-if="testdata.type == 'b2'" v-model="testdata.id2" :rules="[rules.required]" />
            <v-text-field v-model.number="testdata.price" type="number" :rules="[rules.required]"/>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click="somemethod()" :disabled="isLoading || !isFormValid" :loading="isLoading">submit</v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-container>
  </v-app>
</template>
<script lang="ts">
import Vue from 'vue';

interface SomeDto {
 type: 'b1'|'b2'; id:string; id2:string; price:number
}

interface Data {
  rules: any;
  isFormValid: boolean;
  testdata: SomeDto;
  isLoading: boolean;
}
export default Vue.extend({
  data(): Data {
    return {
      isFormValid: false,
      isLoading: false,
      testdata: {type: 'b1', 'id:'test', id2:'', price:0},
      rules: {
        required: (value: any) => !!value || 'required',
        id: (value: string) => value.length == 12 || 'you need 12 characters',
      },
    };
  },
  methods: {
    async somemethod() {
    //do something
    },
  },
});
</script>

Her türlü yardım takdir edilir!!!

Cevap #1

Sadece değiştir

id: (value: string) => value.length == 12 || 'you need 12 characters'

için

id: (value: string) => value && value.length == 12 || 'you need 12 characters'

Cevap #2

şuradan :-

id: (value: string) => value.length == 12 || 'you need 12 characters'

için :-

id: (value: string) => (value && value.length == 12) || 'you need 12 characters'

Burada, önce değeri kontrol edecek, sonra uzunluğu kontrol edecek; eğer ikisi de doğruysa, doğru olacak.