var MainTable = Vue.extend({
  template: "<ul>" +
    "<li v-for='(set,index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  data: function() {
    return data;
  }
});

Vue.component("main-table", MainTable);

data.settingsSelected = {};
var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

У наведеному вище коді помилка нижче виникає при натисканні кнопки.

[Попередження Vue]: Властивість або метод "changeSetting" не визначено в екземплярі, але на нього посилаються під час відтворення. Обов’язково заявіть властивості реактивних даних у опції даних. (знайдено в <MainTable>)

Проблема

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

Помилка виникає, оскільки на changeSettingметод посилається MainTableтут компонент:

    "<button @click='changeSetting(index)'> Info </button>" +

Однак changeSettingметод не визначений у MainTableкомпоненті. Це визначається в кореневому компоненті тут:

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

Потрібно пам’ятати, що на властивості та методи можна посилатися лише в тій області, де вони визначені.

Все в батьківському шаблоні компілюється у батьківському полі; все у дочірньому шаблоні компілюється у дочірній області.

Ви можете прочитати більше про сферу компіляції компонентів у документації Vue .

Що я можу з цим зробити?

До цього часу було багато розмов про те, щоб визначити речі в правильній області, тому виправлення полягає лише в тому, щоб перенести changeSettingвизначення в MainTableкомпонент?

Здається, це просто, але ось що я рекомендую.

Можливо, ви хотіли б, щоб ваш MainTableкомпонент був німим / презентаційним компонентом. ( Ось щось потрібно прочитати, якщо ви не знаєте, що це таке, але tl; dr полягає в тому, що компонент просто відповідає за рендеринг чогось - ніякої логіки). Елемент smart / container відповідає за логіку - у прикладі, наведеному у вашому запитанні, кореневим компонентом буде компонент smart / container. За допомогою цієї архітектури ви можете використовувати методи взаємодії батьків-дочірніх компаній Vue для взаємодії компонентів. Ви передаєте дані про MainTableчерез реквізит і випускаєте дії користувача від MainTableсвого батька через події . Це може виглядати приблизно так:

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});


var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

Вищезазначеного має бути достатньо, щоб дати вам гарне уявлення про те, що робити, і почати вирішення вашої проблеми.

Якщо хтось потрапить із тією самою безглуздою проблемою, що і у мене, переконайтеся, що у вашому компоненті правильно написано властивість data (наприклад, дані , а не дата )

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

У моєму випадку причина полягала в тому, що я забув лише про закриття

</script>

тег.

Але це спричинило те саме повідомлення про помилку.

Можливо, це спричинено орфографічною помилкою

Я отримав помилку при закритті тегу скрипта

</sscript>

Якщо ви двічі використовуєте екземпляр vue. Тоді це дасть вам цю помилку. Наприклад, в app.js та власний тег сценарію у файлі представлення. Просто використовуйте один раз

 const app = new Vue({
    el: '#app',
});

Додаючи мій біт, також, якщо хтось буде боротися, як я, зауважте, що методи - це чутливе до слова:

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  Methods: {
      name() {return '';}
  }
</script>

"Методи" повинні бути "методами"

Це, швидше за все, орфографічна помилка зарезервованих змінних vuejs. Я потрапив сюди, тому що неправильно написав computed:і vuejs не розпізнав мої обчислювані змінні властивості. Тож якщо у вас є така помилка, спершу перевірте правопис!

Я отримав цю помилку, коли намагався привласнити властивість компонента до властивості стану під час створення екземпляра

export default {
 props: ['value1'],
 data() {
  return {
   value2: this.value1 // throws the error
   }
  }, 
 created(){
  this.value2 = this.value1 // safe
 }
}

У мене було два methods:в <script>, йде , щоб показати, що ви можете витратити годинник , дивлячись на те , що було таке просте помилкою.

Моя проблема полягала в тому, що я розміщував методи всередині мого об’єкта даних. просто відформатуйте його так, і це буде працювати добре.

<script>
module.exports = {
    data: () => {
        return {
            name: ""
        }
    },
    methods: {
        myFunc() {
            // code
        }
    }
}
</script>

Якщо у вас виникла така проблема, переконайтесь, що у вас її немає

methods: {
...
}

або

computed: {
...
}

оголошено двічі

У моєму випадку це було властивість, яке дало мені помилку, правильне написання і все-таки дало мені помилку в консолі. Я так багато шукав, і в мене нічого не працювало, поки я не дав йому Ctrl + F5 і Voilá! помилку видалено. : 'v