Vue代码报错：指定类型不存在positive_rule属性，求修复addMore函数

错误原因 #

这个TypeScript错误是因为无法正确推断组件实例的类型，导致methods中this的类型仅包含方法定义，找不到data中声明的positive_rule属性。

解决方案 #

根据你使用的Vue版本，选择以下方式修复：

1. Vue2 + TypeScript

使用Vue.extend包裹组件选项，帮助TypeScript正确推断组件实例的类型：

import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      positive_rule: [
        {
          positive_rule: "",
        },
      ],
    };
  },
  methods: {
    addMore() {
      this.positive_rule.push({
        positive_rule: "",
      });
    },
    remove(index: number) { // 替换any为更严谨的number类型
      this.positive_rule.splice(index, 1);
    },
  }
})

2. Vue3 + TypeScript

使用defineComponent包裹组件选项，确保TypeScript能正确识别data和methods的关联：

import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      positive_rule: [
        {
          positive_rule: "",
        },
      ],
    };
  },
  methods: {
    addMore() {
      this.positive_rule.push({
        positive_rule: "",
      });
    },
    remove(index: number) {
      this.positive_rule.splice(index, 1);
    },
  }
})

进阶：明确类型定义

可以为数组项定义接口，让类型检查更严谨：

// Vue2示例，Vue3只需替换Vue.extend为defineComponent
import Vue from 'vue'

interface PositiveRuleItem {
  positive_rule: string
}

export default Vue.extend({
  data(): { positive_rule: PositiveRuleItem[] } {
    return {
      positive_rule: [
        {
          positive_rule: "",
        },
      ],
    };
  },
  methods: {
    addMore() {
      this.positive_rule.push({
        positive_rule: "",
      });
    },
    remove(index: number) {
      this.positive_rule.splice(index, 1);
    },
  }
})

内容的提问来源于stack exchange，提问作者Sanan Shah