javascript Vue Uncaught TypeError：fn.bind 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49950029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue Uncaught TypeError: fn.bind is not a function
提问by Arunabh Das
My App.vue looks as follows
我的 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>
I have the following code in src/components/HomeCentral.vue
我在 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>
This throws the following error :
这会引发以下错误：
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)
Things start to work fine if I remove the computed block :
如果我删除计算块，事情开始正常工作：
computed: {
fullName: function() {
return this.user.firstName + ' ' + this.user.lastName;
}
},
Please help me figure out what I'm doing wrong.
请帮我弄清楚我做错了什么。
回答by Mansehr
The methods block should only contain javascript functions. I also got this error when I had a nested object with methods inside the methods block.
方法块应该只包含 javascript 函数。当我在方法块内有一个带有方法的嵌套对象时，我也遇到了这个错误。
Ie:
IE：
methods: {
namespace: {
methodName () {
}
}
}
Should be formatted to
应该格式化为
methods: {
namespace-methodName () {
}
}
回答by Sumit Patel
can you please add below code and try,
你可以添加下面的代码并尝试，
<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>
you accidentally nested computer inside method.
您不小心将计算机嵌套在方法中。
回答by xgqfrms
vue namespace bug & solutions
vue 命名空间错误和解决方案
I will never recommended use vue & vue componets in this way
我永远不会推荐以这种方式使用 vue 和 vue 组件
click event bind bug
点击事件绑定bug
solution (global thisnamespace bug)
解决方案（全局this命名空间bug）
just return an instance of vue, and everything is OK now.
只需返回一个 vue 实例，现在一切正常。
more details
更多细节
