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.info('pressed' + e.target.value);
    },
    enterHit() {
      console.info('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, см. Вычисляемые свойства и наблюдатели, что не требуются методы

— 20.04.2018 23:37

Ferrybig прав, перемещение "вычисленное" - это не метод, он устанавливает вычисляемые свойства вашего объекта. Вывести вычисленные из методов.

— 20.04.2018 23:41

javascript vue.js ecmascript-6 vuejs2

20.04.2018 23:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

14 025

Ответы 3

Блок методов должен содержать только функции javascript. Я также получил эту ошибку, когда у меня был вложенный объект с методами внутри блока методов.

Т.е.:

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

Должен быть отформатирован в

methods: {
  namespace-methodName () {
  }
}

23.05.2018 11:55

не могли бы вы добавить код ниже и попробовать,

<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.info('pressed' + e.target.value);
},
enterHit() {
  console.info('You hit enter');
}
},
computed: {
  fullName: function() {
    return this.user.firstName + ' ' + this.user.lastName;
  }    
},
};
</script>

<style scoped>

</style>

вы случайно вложили компьютер внутрь метода.

06.06.2018 15:06