javascript - when - vuejs 2 examples



[Vue warn]: Propriedade ou método não está definido na instância, mas referenciado durante a renderização (1)

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 método changeSetting está sendo referenciado no componente MainTable aqui:

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

No entanto, o método changeSetting não está definido no componente MainTable . 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 onde eles 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 de componentes na documentation do Vue.

O que posso fazer sobre isso?

Até agora tem havido muita conversa sobre como definir as coisas no escopo correto, então a correção é apenas para mover a definição de changeSetting para o componente MainTable ?

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

Você provavelmente desejaria que seu componente MainTable fosse um componente mudo / apresentacional. ( Here está algo para ler, se você não sabe o que é, mas é que o componente é apenas responsável por renderizar algo - sem lógica). O elemento inteligente / contêiner é responsável pela lógica - no exemplo dado em sua pergunta, o componente raiz seria o componente inteligente / contêiner. Com essa arquitetura, você pode usar os métodos de comunicação pai-filho do Vue para os componentes interagirem. Você passa os dados para MainTable via props e emite ações do usuário de MainTable para seu pai através de events . Pode parecer 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 acima deve ser suficiente para lhe dar uma boa ideia do que fazer e do kickstart para resolver o seu problema.

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]: Propriedade ou método "changeSetting" não está 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> )