36698


[Vueのクリックイベント時に式を実行させることがうまくいきません。](https://ja.stackoverflow.com/questions/36569/vue%e3%81%ae%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e6%99%82%e3%81%ab%e5%bc%8f%e3%82%92%e5%ae%9f%e8%a1%8c%e3%81%95%e3%81%9b%e3%82%8b%e3%81%93%e3%81%a8%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e3%81%84%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93/36573?noredirect=1#comment36706_36573)  
の続き

教えていただいた情報をもとに下記のようにしたのですが二つ目だけうまくいって一つ目がうまくいきません。もしかして一つのvueに二つ入れてはいけないのでしょうか？

また、  
this.headdingのthisはの子要素であるv-text="headding"の中に指定のテキストを入れるという意味でよいでしょうか‌​?

[code]

    var app = 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つめを紹介します。...';
            }
        },
    
        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つめを紹介します。...';
            }
        }
    })
    
[/code]


CC BY-SA 3.0
2017-07-26T06:19:08.437
36690
2017-07-26T18:31:07.107
24247
question
vue.js
Vuejsがうまくいきません。


## 問題点

`new Vue( ...
)`にオブジェクトリテラルを渡していますが、同じプロパティ名(`el`,`data`,`methods`)を二度書くのは間違っています。エラーにはならないですが、後の値によって上書きされることになります。オブジェクトは1つのプロパティ名に対して1つの値しか持つことはできません。

たとえば

[code]

    var o = { p: "11", p: "abc" };
    
[/code]

と書けば`o`は`{ p : "abc" }`となります。

## 解決策

vueインスタンスを2個作ります。

[code]

    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つめを紹介します。...';
            }
        }
    });
    
[/code]

* * *

> this.headdingのthisはの子要素であるv-text="headding"の中に指定のテキストを入れるという意味でよいでしょうか‌​?

子要素を指定しているわけではありません。`this`は`new
Vue(...)`で作られるVueインスタンスです。それが持つ`headding`という名前のデータを、子孫要素が`v-text="headding"`として参照しているだけです。そして`headding`の値が更新されると、自動的に先の要素のテキストも更新されます。


CC BY-SA 3.0
2017-07-26T18:31:07.107
36698
2017-07-26T18:31:07.107
20206
36690
answer