javascript – Vue Uncaught TypeError：fn.bind不是函数

我的App.vue看起来如下

<template>
  <div id="app">
    <home-central></home-central>
  </div>

</template>

<script>
import HomeCentral from './components/HomeCentral';

export default {
  name: 'App',components: {
    HomeCentral,},};
</script>
<style>
#app {
  font-family: "Avenir",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我在src / components / HomeCentral.vue中有以下代码

<template>
    <div class="homecentral">
        <input type="text" v-model="title"><br/>
        <h1>{{title}}</h1>
        <p v-if="showName">{{user.first_name}}</p>
        <p v-else>Nobody</p>
        <ul>
            <li v-for="item in items" :key="item.id">{{item.title}}</li>it
        </ul>
        <button v-on:click="greet('Hello World')">Say Greeting</button>
        <br/>
        <input type="text" v-on:keyup="pressKey" v-on:keyup.enter="enterHit">
        <label>First Name: </label><input type="text" v-model="user.firstName">
        <br/>
        <label>Last Name: </label><input type="text" v-model="user.lastName">
        <h3></h3>
    </div>
</template>

<script>
export default {
  name: 'HomeCentral',data() {
    return {
      title: 'Welcome',user: {
        firstName: 'John',lastName: 'Doe',showName: true,items: [
          { title: 'Item One' },{ title: 'Item Two' },{ title: 'Item Three' },],};
  },methods: {
    greet: function (greeting) {
      alert(greeting);
    },pressKey: function (e){
      console.log('pressed' + e.target.value);
    },enterHit() {
      console.log('You hit enter');
    },computed: {
      fullName: function() {
        return this.user.firstName + ' ' + this.user.lastName;
      }
    },};
</script>

<style scoped>

</style>

这会引发以下错误：

vue.runtime.esm.js?ff9b:205 Uncaught TypeError: fn.bind is not a function
    at nativeBind (vue.runtime.esm.js?ff9b:205)
    at initMethods (vue.runtime.esm.js?ff9b:3537)
    at initState (vue.runtime.esm.js?ff9b:3305)
    at VueComponent.Vue._init (vue.runtime.esm.js?ff9b:4624)
    at new VueComponent (vue.runtime.esm.js?ff9b:4794)
    at createComponentInstanceForVnode (vue.runtime.esm.js?ff9b:4306)
    at init (vue.runtime.esm.js?ff9b:4127)
    at createComponent (vue.runtime.esm.js?ff9b:5604)
    at createElm (vue.runtime.esm.js?ff9b:5551)
    at createChildren (vue.runtime.esm.js?ff9b:5678)

如果我删除计算块,事情就会开始正常工作：

computed: {
  fullName: function() {
    return this.user.firstName + ' ' + this.user.lastName;
  }
},

请帮我弄清楚我做错了什么.

解决方法

方法块应该只包含javascript函数.
当我在方法块中有一个带有方法的嵌套对象时,我也遇到了这个错误.

即：

methods: {
  namespace: {
    methodName () {
    }
  }
}

应格式化为

methods: {
  namespace-methodName () {
  }
}

原文链接：https://www.f2er.com/js/158709.html

javascript – Vue Uncaught TypeError：fn.bind不是函数

解决方法

猜你在找的JavaScript相关文章