VueJS(TypeScript)方法内修改data值报错：Property 'played'不存在

问题根源 #

1. TypeScript类型推断缺失：直接用export default {}定义组件时，TypeScript无法正确推断this的类型，导致识别不到data里声明的played属性。
2. 语法错误：你在some方法里用了==（相等比较）而非=（赋值操作），就算类型问题解决，这行代码也没法修改played的值。

修复方案 #

方案1：Vue 2项目用Vue.extend #

通过Vue.extend包裹组件选项，让TypeScript能正确推断组件实例类型：

import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      continued: false,
      played: false
    }
  },
  methods: {
    some(){
      // 修正为赋值操作
      this.played = true;
    }
  }
});

方案2：Vue 3项目用defineComponent #

用官方提供的defineComponent方法提升类型推断能力：

import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      continued: false,
      played: false
    }
  },
  methods: {
    some(){
      this.played = true;
    }
  }
});

进阶类型控制（可选） #

如果需要更精确的类型约束，可以手动为data返回值定义接口：

interface ComponentData {
  continued: boolean;
  played: boolean;
}

// Vue 2示例
export default Vue.extend({
  data(): ComponentData {
    return {
      continued: false,
      played: false
    }
  },
  methods: {
    some(){
      this.played = true;
    }
  }
});

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