0

Vueのクリックイベント時に式を実行させることがうまくいきません。
の続き

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

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

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つめを紹介します。...';
        }
    }
})
2
  • この質問でいう「うまくいく」とは何でしょうか。質問文に追記をお願いします。
    – htb
    2017年7月26日 7:57
  • クリック時に両方ともthis.headding = '当社のダミー商品2つめを紹介します。'; this.description1 = '1. 当社のダミー商品2つめを紹介します。...'; this.description2 = '2. 当社のダミー商品2つめを紹介します。...';という文字に変換されることが最終目的です 2017年7月26日 8:21

1 件の回答 1

3

問題点

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"の中に指定のテキストを入れるという意味でよいでしょうか‌​?

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。