Q&A
前提・実現したいこと
・Vue.jsで連想配列にプロパティ追加 0: {name: "Apple", price: 100} 1: {name: "Orange", price: 200｝ ↓ 上記を以下に 0: {name: "Apple", price: 100, color: true} 1: {name: "Orange", price: 200, color: true｝
発生している問題・エラーメッセージ
rawJsでは上手く追加できました。 Vue.jsだとコンソール で『__ob__: Observer』となります。 （元のnameとpriceは見える） これはVueではオブジェクトの形式上、オブザーバーに格納される正常な動作のようです。 JSON.parse(JSON.stringify(obj))で対応可能なようですが、いくつか試したものの上手くいきませんでした。 詳しい方ご回答よろしくお願い致します。
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>test</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 10 <div id="app"></div> 11 <script> 12 //↓↓ここからrawJs。// 13 const color = true; 14 const items = [ 15 { name: "Apple", price: 100 }, 16 { name: "Orange", price: 200 }, 17 ]; 18 19 items.forEach((e) => { 20 e.color = color; 21 }); 22 console.log( items ); 23 //↑↑ここまでrawJs。console.logでcolor:trueが追加されたのが確認できる// 24 25 //↓↓rawJsをVue.jsに置き換え// 26 new Vue({ 27 el: '#app', 28 data: { 29 color: true, 30 items: [ 31 { name: "Apple", price: 100 }, 32 { name: "Orange", price: 200 }, 33 ], 34 }, 35 36 methods: { 37 addArr: function() { 38 this.items.forEach((e) => { 39 e.color = this.color; 40 }); 41 }, 42 }, 43 44 mounted: function() { 45 this.addArr; 46 console.log(this.items) 47 }, 48 }); 49 //↑↑console.logでObserver// 50 </script> 51 </body> 52</html>
回答1件
0
ベストアンサー
単純にメソッドが実行されていないようにみえるのですが、下記の書き方ではだめですか？
mounted: function () { this.addArr(); }
投稿2020/10/13 13:06
総合スコア117
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/13 14:03