Vue Uncaught TypeError：fn.bind 不是函数

Posted 2023-02-22

技术标签:

【中文标题】Vue Uncaught TypeError：fn.bind 不是函数【英文标题】：Vue Uncaught TypeError: fn.bind is not a function 【发布时间】：2018-10-01 15:59:16 【问题描述】：

我的 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;
  
,

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

【问题讨论】：

您的问题是由拼写错误引起的，您不小心将计算机嵌套在方法中，而不是在同一级别上，并且 .bind 不存在于 javascript 对象上，请参阅 Computed Properties and Watchers 那不是方法是必需的 Ferrybig 是正确的，移动“计算”不是一种方法，它会在您的对象上设置计算属性。将计算移出方法。 【参考方案1】：

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

即：

methods: 
  namespace: 
    methodName ()

应该格式化为

methods: 
  namespace-methodName ()

【讨论】：

【参考方案2】：

能否请您添加以下代码并尝试，

<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>

<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>

您不小心将计算机嵌套在方法中。

【讨论】：

【参考方案3】：