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];
    }
  }
});

Com o código acima, o erro abaixo ocorre quando o botão é clicado.

[Vue warn]: A propriedade ou método "changeSetting" não é definido na instância, mas referenciado durante a renderização. Certifique-se de declarar propriedades de dados reativos na opção de dados. (encontrado em <MainTable>)

Problema

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

O erro está ocorrendo porque o changeSettingmétodo está sendo referenciado no MainTablecomponente aqui:

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

No entanto, o changeSettingmétodo não está definido no MainTablecomponente. Ele está sendo definido no componente raiz aqui:

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

O que precisa ser lembrado é que propriedades e métodos só podem ser referenciados no escopo em que são definidos.

Tudo no modelo pai é compilado no escopo pai; tudo no modelo filho é compilado no escopo filho.

Você pode ler mais sobre o escopo de compilação do componente na documentação do Vue .

O que posso fazer a respeito?

Até agora, tem se falado muito sobre como definir as coisas no escopo correto, então a correção é apenas mover a changeSettingdefinição para o MainTablecomponente?

Parece tão simples, mas aqui está o que eu recomendo.

Você provavelmente quer que seu MainTablecomponente seja um componente burro / de apresentação. ( Aqui está algo para ler se você não sabe o que é, mas um tl; dr é que o componente é apenas responsável por renderizar algo - sem lógica). O elemento smart / container é responsável pela lógica - no exemplo dado em sua pergunta, o componente raiz seria o componente smart / container. Com esta arquitetura, você pode usar os métodos de comunicação pai-filho do Vue para que os componentes interajam. Você passa os dados para MainTablevia props e emite ações do usuário MainTablepara seu pai por meio de eventos . Pode ser algo assim:

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
    },
  },
}),

O que foi dito acima deve ser suficiente para lhe dar uma boa ideia do que fazer e começar a resolver o seu problema.

Se alguém tiver o mesmo problema bobo que eu tive, certifique-se de que seu componente tenha a propriedade ' data ' escrita corretamente. (por exemplo , dados , e não data )

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

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

No meu caso, o motivo foi, só esqueci o fechamento

</script>

tag.

Mas isso causou a mesma mensagem de erro.

Provavelmente é causado por um erro ortográfico

Eu cometi um erro de digitação na tag de fechamento do script

</sscript>

Adicionando minha parte também, se alguém tiver dificuldades como eu, observe que métodos diferenciam maiúsculas de minúsculas:

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

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

'Métodos' devem ser 'métodos'

Se você usar duas vezes a instância vue. Em seguida, ele apresentará este erro. Por exemplo, em app.js e sua própria tag de script no arquivo de visualização. Só use uma vez

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

É mais provável que seja um erro ortográfico de variáveis ​​vuejs reservadas. Cheguei aqui porque computed:digitei errado e vuejs não reconheceria minhas variáveis ​​de propriedade computadas. Portanto, se você tiver um erro como este, verifique a ortografia primeiro!

Recebi este erro quando tentei atribuir uma propriedade de componente a uma propriedade de estado durante a instanciação

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

Tive dois methods:no <script>, vai mostrar, que você pode passar horas procurando por algo que foi um erro tão simples.

Meu problema era que eu estava colocando os métodos dentro do meu objeto de dados. apenas formate-o assim e ele funcionará bem.

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

Se você estiver enfrentando esse problema, certifique-se de não ter

methods: {
...
}

ou

computed: {
...
}

declarado duas vezes

No meu caso foi uma propriedade que me deu o erro, a escrita correta e ainda me deu o erro no console. Procurei muito e nada funcionou para mim, até que dei a ele Ctrl + F5 e Voilá! o erro foi removido. : 'v