質問: '2. 当社のダミー商品2つめを紹介します。...'; } } }) ```
回答: 問題点 `new Vue( ... )`にオブジェクトリテラルを渡していますが、同じプロパティ名(`el`,`data`,`methods`)を二度書くのは間違っています。エラーにはならないですが、後の値によって上書きされることになります。オブジェクトは1つのプロパティ名に対して1つの値しか持つことはできません。 たとえば ``` var o = { p: "11", p: "abc" }; ``` と書けば`o`は`{ p : "abc" }`となります。 解決策 vueインスタンスを2個作ります。 ``` var app1 = new Vue({ el: '#vueHook1', data: { headding: '当社のダミー商品1つめを紹介します。', description1: '1. 当社のダミー商品1つめを紹介します。...', description2: '2. 当社のダミー商品1つめを紹介します。...', }, methods: { change: function() { this.headding = '当社のダミー商品2つめを紹介します。'; this.description1 = '1. 当社のダミー商品2つめを紹介します。...'; this.description2 = '2. 当社のダミー商品2つめを紹介します。...'; } } }); var app2 = new Vue({ el: '#vueHook2', data: { headding: '当社のダミー商品1つめを紹介します。', description1: '1. 当社のダミー商品1つめを紹介します。...', description2: '2. 当社のダミー商品1つめを紹介します。...', }, methods: { change2: function() { this.headding = '当社のダミー商品2つめを紹介します。'; this.description1 = '1. 当社のダミー商品2つめを紹介します。...'; this.description2 = '2. 当社のダミー商品2つめを紹介します。...'; } } }); ``` > > this.headdingのthisはの子要素であるv-text="headding"の中に指定のテキストを入れるという意味でよいでしょうか? > > > 子要素を指定しているわけではありません。`this`は`new Vue(...)`で作られるVueインスタンスです。それが持つ`headding`という名前のデータを、子孫要素が`v-text="headding"`として参照しているだけです。そして`headding`の値が更新されると、自動的に先の要素のテキストも更新されます。