使用Vue JS 2动态更改超链接中的文本

Question

我正在尝试创建一个空的超链接，这会在单击时触发一个方法。但是，由于未知原因，调用该方法但文本不绑定。 您可以复制并尝试地址：https://jsfiddle.net/yyx990803/okv0rgrk/

＆＃13;

＆＃13;

new Vue({
    el: '#app',
    data: {
        message: 'Edit'
    },
    methods: {
    	edit() {
            message: 'Done'
        }
    }
})

＆＃13;

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<a href="javascript:void(0);" v-on:click="edit()" id="app">
  {{message}}
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法正确访问Vue实例的数据属性。

Vue实例的数据属性是通过_...属性（或更常见的data方法）设置的，但可以通过data在实例上直接访问。

＆＃13;

＆＃13;

this

＆＃13;

new Vue({
    el: '#app',
    data() {
        return {
            message: 'Edit'
        }
    },
    methods: {
    	edit() {
            this.message = 'Done';
        }
    }
})

＆＃13;

＆＃13;

＆＃13;