質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1250閲覧

Vue.js deepオプションについて

ken1203

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/01/15 10:21

前提・実現したいこと

前提 Vue.js deepオプションについて学習中
実現したいこと
deepオプションを用いてconsole上で下記のように実行したい。

console >app.colors[1].name = 'white' update! new: [ { "name": "Red" }, { "name": "White" }, { "name": "Blue" ], oldValue: [ { "name": "Red" }, { "name": "White" } { "name": "Blue" } ] "White"

発生している問題・エラーメッセージ

console app.colors[1].name = 'white' main.js:13 Update! vue.js:597 [Vue warn]: Error in callback for watcher "colors": "ReferenceError: overValue is not defined" (found in <Root>) warn @ vue.js:597 logError @ vue.js:1739 globalHandleError @ vue.js:1734 handleError @ vue.js:1723 run @ vue.js:3233 flushSchedulerQueue @ vue.js:2981 (anonymous) @ vue.js:1839 flushCallbacks @ vue.js:1760 Promise.then (async) microTimerFunc @ vue.js:1808 nextTick @ vue.js:1852 queueWatcher @ vue.js:3068 update @ vue.js:3207 notify @ vue.js:703 reactiveSetter @ vue.js:1020 (anonymous) @ VM4007:1 vue.js:1743 ReferenceError: overValue is not defined at Vue.handler (main.js:14) at Watcher.run (vue.js:3231) at flushSchedulerQueue (vue.js:2981) at Array.<anonymous> (vue.js:1839) at flushCallbacks (vue.js:1760) logError @ vue.js:1743 globalHandleError @ vue.js:1734 handleError @ vue.js:1723 run @ vue.js:3233 flushSchedulerQueue @ vue.js:2981 (anonymous) @ vue.js:1839 flushCallbacks @ vue.js:1760 Promise.then (async) microTimerFunc @ vue.js:1808 nextTick @ vue.js:1852 queueWatcher @ vue.js:3068 update @ vue.js:3207 notify @ vue.js:703 reactiveSetter @ vue.js:1020 (anonymous) @ VM4007:1 "white"

該当するソースコード

index.html <html lang ="ja"> <head> <meta charset="utf-8"> <title>watch, deep</title> <link rel="stylesheet" href="css/main.css"> </head> <div id='app'> <ul> <li v-for= "color in colors"> {{ color.name }} </li> </ul> </div> <body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script> <script src="js/main.js"></script> </body> </html>
main.js var app = new Vue({ el: '#app', data: { colors: [ { name: 'Red'}, { name: 'Green'}, { name: 'Blue'}, ] }, watch: { colors: { handler: function(newValue, oldValue) { console.log('Update!') console.log('new: %s, oldValue: %s', JSON.stringify(newValue, null, '\t'),JSON.stringify(overValue, null, '\t') ) }, deep: true } } })

試したこと(仮説)

エラー内容で検索しました。
リンク内容
を参照行いました。
ReferenceError: overValue is not defined
overValueが定義されていない??という認識なのでしょうか??

補足

初心者で言葉足らずで申し訳ありませんが、ご教示頂きたくご質問させて頂きました。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

overvalue→× oldvalue→◯
で解決致しました!

投稿2021/01/15 10:24

ken1203

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問