[SOLVED] Getting this error: Cannot read property 'length' of undefined


I am building an app with nuxt (using vuetify 2 and typescript).

I have radio buttons(say b1 b2) and text fields(say t1 t2 t3).

When user clicks b1, it shows t1 and t3

When user clicks b2, it shows t2 and t3

I think validation for field t1 is causing an error but not sure why.

When user open the page, b1 is selected by default.

When I switch to b2, and write something… then comeback to b1, nothing happen. It works as desired.

When I switch to b2 then switch back to b1 without writing anything, I get Cannot read property 'length' of undefined error.

I first thought that I got this error because id is undefined but the default value of id is ‘test’ and the testdata is already initialized at the time I switch back to b1 so I am confused…

Here’s my simplified code:

    <v-container justify="center">
      <v-card flat width="400" class="mx-auto mt-5 mb-6">
          <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-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-btn color="primary" @click="somemethod()" :disabled="isLoading || !isFormValid" :loading="isLoading">submit</v-btn>
<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

Any help would be appreciated!!!


Just change

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


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

Answered By – Mobin Samani

Answer Checked By – Marie Seifert (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *