Javascript 获取此错误：无法读取属性'；长度'；未定义的

我正在用nuxt（使用vuetify 2和typescript）构建一个应用程序

我有单选按钮（比如b1 b2）和文本字段（比如t1 t2 t3）

当用户单击b1时，显示t1和t3

当用户单击b2时，显示t2和t3

我认为t1字段的验证会导致错误，但不确定原因

当用户打开页面时，默认情况下选择b1

当我切换到b2，写一些东西。。。然后回到b1，什么也没发生。它可以按需要工作

当我切换到b2，然后切换回b1而不写入任何内容时，我得到

无法读取未定义的
错误的属性“length”

我首先认为我得到这个错误是因为
id
未定义，但是
id
的默认值是“test”，并且在我切换回b1时testdata已经初始化，所以我很困惑

以下是我的简化代码：

<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>


提交
从“Vue”导入Vue；
接口SomeDto{
类型：“b1”|“b2”；id:字符串；id2:字符串；价格：编号
}
接口数据{
规则：任何；
isFormValid：布尔值；
测试数据：SomeDto；
isLoading：布尔值；
}
导出默认Vue.extend({
data（）：数据{
返回{
isFormValid:false，
孤岛加载：false，
testdata:{type:'b1'，'id:'test'，id2:''，价格：0}，
规则：{
必需：（值：任意）=>！！值| |“必需”，
id:（value:string）=>value.length==12 | |“您需要12个字符”，
},
};
},
方法：{
异步方法（）{
//做点什么
},
},
});

任何帮助都将不胜感激
 改变一下

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

到

考虑到
.length
的唯一出现是在id规则中，我认为这是用
未定义的
调用的，因此将其更改为
id:（value:string）=>（value&&value.length==12）| |“您需要12个字符”
应该就可以了。谢谢您的回答。顺便说一句，你知道为什么即使
id
已经初始化为“test”了，
值也没有定义吗？我想这可能是因为在vue js中传递数据的延迟或类似的原因我不知道……但是如果你想写无故障代码，你应该在使用值的长度之前检查值
id: (value: string) => value && value.length == 12 || 'you need 12 characters'