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」はインスタンスで定義されていませんが、レンダリング中に参照されます。dataオプションでリアクティブデータプロパティを宣言してください。（で見つかりました<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は構成要素が何かのレンダリングのためだけの責任があるということである-ノーロジック）。スマート/コンテナ要素がロジックを担当します。質問の例では、ルートコンポーネントはスマート/コンテナコンポーネントになります。このアーキテクチャでは、コンポーネントが相互作用するために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
    },
  },
}),

上記は、何をすべきかについての良いアイデアを与え、問題の解決を開始するのに十分なはずです。

私が抱えていたのと同じばかげた問題で誰かが着陸した場合は、コンポーネントの「データ」プロパティのスペルが正しいことを確認してください。（例：日付ではなくデータ）

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

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

私の場合、理由は、締めくくりを忘れただけでした

</script>

鬼ごっこ。

しかし、それは同じエラーメッセージを引き起こしました。

おそらくスペルミスが原因です

スクリプト終了タグでタイプミスがありました

</sscript>

2回の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
 }
}

私は2つ持っていmethods:ました<script>、それはあなたがそのような単純な間違いであった何かを探すのに何時間も費やすことができることを示しに行きます。

私の問題は、データオブジェクト内にメソッドを配置していたことでした。このようにフォーマットするだけで、うまく機能します。

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

この問題が発生している場合は、問題が発生していないことを確認してください

methods: {
...
}

または

computed: {
...
}

2回宣言

私の場合、それは私にエラーと正しい書き込みを与え、それでもコンソールでエラーを与えたプロパティでした。Ctrl + F5とVoiláを彼に与えるまで、私はたくさん検索しましたが、何もうまくいきませんでした！エラーが削除されました。： 'v