My App.vue looks as follows
<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
<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.
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.
Ie:
methods: {
namespace: {
methodName () {
}
}
}
Should be formatted to
methods: {
namespace-methodName () {
}
}
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.
I will never recommended use vue & vue componets in this way
this
namespace bug) just return an instance of vue, and everything is OK now.
more details
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.