トップ > vue > 【Vue】エラー解決備忘録：The "data" option should be a function that returns a per-instance value in component definitions.

【Vue】エラー解決備忘録：The "data" option should be a function that returns a per-instance value in component definitions.

vue javascript

Vueでアプリケーションを実装していた時に発生したエラーについて記載します。

状況

ボタンが２個あるページを作成しました。
ボタンが１個だったときはオブジェクトでも動いていたのですが、２個にしたところ次のエラーが発生しました。

The "data" option should be a function that returns a per-instance value in component definitions.

呼び出し元

それぞれ、CustomButton1、CustomButton2というコンポーネントを用意して次のように呼び出しました。
Vueインスタンスのelは#appです。

<div id="app">
    <custom-button-1></custom-button-1>
    <custom-button-2></custom-button-2>
</div>

コンポーネント

異なるコンポーネントを用意して、それぞれdataオプションにcountというパラメーターを設定していました。

CustomButton1

<script>
export default {
    name: 'customButton1',
    data: {
        count: 0
    },
}
</script>

CustomButton2

<script>
export default {
    name: 'customButton2',
    data: {
        count: 0
    },
}
</script>

原因

Vueのdataオプションはコンポーネント間で共有しているため、dataで同名のオブジェクトを定義している場合は衝突します。
コンポーネントを使用する場合はオブジェクトではなく、関数で定義する必要があります

jp.vuejs.org

オブジェクトで定義しても問題ない場合

次の状態であればオブジェクト型のdataでも動きます。

  • コンポーネントを一つしか使わない。
  • コンポーネントを複数使用するが、dataオプションで定義するプロパティ名が重複しない

コンポーネントを複数使用する場合は、コンポーネント内のdataを関数にしておいた方が事故が起こりにくいです。

修正後

コンポーネントのdataオプションをオブジェクトから、関数に変更しました。

コンポーネント

CustomButton1

<script>
export default {
    name: 'customButton1',
    data: function() {
        return { count: 0 }   //<---関数型に変更
    },
}
</script>

CustomButton2

<script>
export default {
    name: 'customButton2',
    data: function() {
        return { count: 0 }  //<---関数型に変更
    },
}
</script>

©︎2017-2018 WebSandBag