如何从方法访问 Vue.js 组件数据？ [复制]

Posted 2023-02-22

【中文标题】如何从方法访问 Vue.js 组件数据？ [复制]

【英文标题】：How to access Vue.js component data from a method? [duplicate]

【发布时间】：2018-04-27 22:01:30

【问题描述】：

基于vuejs docs，我希望以下代码可以工作，但是当我单击按钮时this 为空：

<template>
    <div class="hello">
        <button v-on:click="test">Test </button>
    </div>
</template>

<script>
    export default 
  name: 'hello',
    methods: 
        test: () => 
            console.log('log data.message', this.msg); 
        
    ,
  data () 
    return 
      msg: 'Welcome to Your Vue.js App'
    
  

</script>

这里是完整的演示：https://codesandbox.io/s/vq3ovx9n70

【参考方案1】：

将您的 test() 方法更改为：

test: function() 
        console.log('log data.message', this.msg); 
    

箭头函数不会以您想要的方式绑定this。