Question

我要提出的问题实际上是在一个简单的入门教程demo that I wrote上引发的。

一个简单的Vue CLI启动了应用vue init webpack giphy-search。

当您点击按钮时，此代码会显示undefined：

<template>
<div class="hello">
    <input name="search" v-model="searchTerm">
    <button @click="performSearch">Search</button>
    <h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
    return {
    msg: "Welcome to GiphySearch",
    searchTerm: "testing"
    };
},
methods: {
    performSearch: () => {
        console.log(this.searchTerm);
    }
}
};
</script>

这个工作正常：

<template>
<div class="hello">
    <input name="search" v-model="searchTerm">
    <button @click="performSearch">Search</button>
    <h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
    return {
    msg: "Welcome to GiphySearch",
    searchTerm: "testing"
    };
},
methods: {
    performSearch: function() {
        console.log(this.searchTerm);
    }
}
};
</script>

问题在于这一行：

performSearch: () => {

如果我这样写：

performSearch: function () {

它将按预期工作。

然而，说实话，我很困惑，因为我认为() =>会被正确地描述出来。我甚至检查了npm run build并打开了构建的代码以查看代码是否被转换 - 它是，但是当我点击按钮时，仍然在控制台中获得undefined日志。

所以，亲爱的Vue.js专家，请帮助我了解这是怎么回事。谢谢！

无法在Vue.js

0 个答案: