検証によるエラーの意味がわからない

Question

現在ionic+vue.jsで開発を進めています。
現在グーグルの検証ツールにて出ている警告文の意味がわからないので
読んで何に対して警告しているのかご教授いただけると幸いです。

以下警告文
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "paused" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <QrReader> at src/UserPage/QrScan.vue
<App> at src/App.vue
<Root>

です。
このエラーをどうやったら解決できるというのではなく。そもそも何に対してのエラーなのかわからないので、そこから教えていただけると幸いです。

またこのエラーに対する解決記事など教えていただけると幸いです

Answer 1

このエラーをどうやったら解決できるというのではなく。そもそも何に対してのエラーなのかわからないので、そこから教えていただけると幸いです。

まずgoogle翻訳でいいから読みましょう。

vue.runtime.esm.js？2b0e：619 [Vue warn]：プロパティまたはメソッド "paused"はインスタンスで定義されていませんが、レンダリング中に参照されます。プロパティを初期化することにより、このプロパティがデータオプション内で、またはクラスベースのコンポーネントに対して反応的であることを確認してください。 https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Propertiesを参照してください。

で見つかった

---> <QrReader>（src / UserPage / QrScan.vueにあります）
src / App.vueの<App>
<ルート>

次にこのメッセージで指示されているこれを読みましょう。

その上で、理解できないポイントはどこでしょうか。

Comments

[kazumasamatsumo]

親切なご回答ありがとうございます。

読んでみたところでわからないところですが。

ルートレベルのリアクティブプロパティを動的に追加すること
ここは全く理解できません。
ルートレベル？リアクティブプロパティ？動的に追加？
という感じです。

空の値を指定しても
ここはおそらくmessage: ' '
のことかと思っていますが確証はありません。

すべてのルートレベルのリアクティブデータプロパティを事前に宣言してVueインスタンスを初期化する
mountedが初期化のイメージですがあってますか？
上記でも全てのルートレベルのリアクティブデータプロパティを事前に宣言することが具体的にはどのようにすることなのかわかっていません。

var vm = new Vue({
data: {
// declare message with an empty value
message: ''
},
template: '<div>{{ message }}</div>'
})
// set `message` later
vm.message = 'Hello!'
messagedataオプションで宣言していない場合、Vueはrender関数が存在しないプロパティにアクセスしようとしていることを警告します。

この文もわかりませんでした。メッセージデータを空白にしていて、バインディングしているところにエラーが出るのがわかりませんでした。

この制限の背後にある技術的な理由があります - それは依存性追跡システムのエッジケースのクラスを排除し、またVueインスタンスが型チェックシステムとうまく働くようにします。しかし、コードの保守容易性に関しても重要な考慮事項がありdataます。オブジェクトはコンポーネントの状態のスキーマのようなものです。すべての反応型プロパティを前もって宣言すると、後で再訪問したり別の開発者が読んだりするときにコンポーネントコードを理解しやすくなります。

ここはプロパティを前もって宣言しておいた方がいいよという意味かと思いました。でもだからどう書けばいいのかはわかっていません。

おそらくpausedがインスタンスで定義してあげればエラーが無くなるのかと思いますが、インスタンスで定義ってどうやるのかわかりません。

[kazumasamatsumo]

pausedというをバインドしないといけないのに、コード部分にpausedという変数またはメソッドがないといけないと警告が出ていました。
見た感じ、そもそもこのコードにpausedというバインドする必要がなさそうだったので、一旦pausedのバインドを削除しました
そしたらエラーも消えてなくなりました！！

ありがとうございます！！