Vue组件：如何修改data方法内属性值？点击链接无法显示弹窗

嘿，我一眼就发现问题所在了——你错误地在Vue组件的核心选项里使用了箭头函数，导致this根本没指向Vue组件实例，自然没法修改data里的dialog属性。

为啥箭头函数不行？ #

箭头函数没有自己独立的this，它会“继承”外层作用域的this，但Vue组件要求data、methods、computed这些选项里的函数，其this必须指向当前的组件实例。用箭头函数的话，你写的this.dialog根本找不到组件里的那个dialog变量。

修正后的完整代码 #

export default {
  // 把data改成普通函数，返回响应式对象
  data() {
    return {
      drawer: true,
      dialog: false
    }
  },
  props: {
    source: String
  },
  // methods里的方法全部改用普通函数
  methods: {
    me() {
      alert('me')
    },
    showDialog() {
      this.dialog = true
    }
  },
  // computed同样用普通函数，直接返回计算结果（原写法的赋值是错误的）
  computed: {
    months() {
      return ['na', 'asd', 'asd']
    }
  }
}

核心修改点拆解 #

1. data选项：从箭头函数() => ({})改为普通函数data() { return {} }，确保this绑定到组件实例上。
2. methods方法：把me和showDialog都改成普通函数定义，这样调用this.dialog = true时，this就是当前组件实例，能正确修改data里的属性。
3. computed计算属性：不仅要改成普通函数，还要修正写法——computed应该直接返回计算后的结果，而不是像你原来那样给this.months赋值（这完全不符合computed的用法）。

改完之后，你再点击Dashboard链接调用showDialog，就能顺利把dialog设为true，弹窗自然就正常显示啦！

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