36573


[Vue.jsがうまくいきません](https://ja.stackoverflow.com/questions/36137/vue-
js%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)  
の続き

前回の質問で教えていただいたことを参考に下記のように変更を行ったのですが、やはりうまくいきません。

[code]

    <button @click="change"> </button>
    
[/code]

[code]

    var app = new Vue({
      el: '#changeBtn2',
      data: {
        headding: '当社のダミー商品１つめを紹介します。',
        description1: '1. 当社のダミー商品１つめを紹介します。...',
        description2: '2. 当社のダミー商品１つめを紹介します。...'
        // show: false
      },
      methods: {
        change: function() {
          headding: '当社のダミー商品2つめを紹介します。',
        description1: '1. 当社のダミー商品2つめを紹介します。...',
        description2: '2. 当社のダミー商品2つめを紹介します。...'
        }
      }
    })
    
[/code]

* * *

### 追記

[mjy
さんの回答](https://ja.stackoverflow.com/a/36573/19110)を元に書きなおしたのですが、やはりうまくいきません。

[code]

        <button @click="change"> </button>
    
        <p id="description1">
        {{ description1 }}
    </p>
    
[/code]

[code]

    var app = new Vue({
      el: '#changeBtn1',
      data: {
        headding: '当社のダミー商品2つめを紹介します。',
        description1: '1. 当社のダミー商品2つめを紹介します。...',
        description2: '2. 当社のダミー商品2つめを紹介します。...'
        // show: false
      },
      methods: {
        change: function() {
            headding= '当社のダミー商品2つめを紹介します。';
            description1= '1. 当社のダミー商品2つめを紹介します。...';
            description2= '2. 当社のダミー商品2つめを紹介します。...';
            },
      },
    });
    
[/code]


CC BY-SA 3.0
2017-07-21T12:22:54.683
36569
2017-07-22T02:54:57.147
2017-07-22T01:32:10.873
19110
24247
question
vue.js
Vueのクリックイベント時に式を実行させることがうまくいきません。


質問者さんのやりたい事を[Kesuiket
さんの回答](https://ja.stackoverflow.com/a/36430/3054)から類推して書き変えると下記のようになるかと思います。

[code]

    var app = new Vue({
      el: '#app',
      data: {
        headding: '当社のダミー商品1つめを紹介します。',
        description1: '1. 当社のダミー商品1つめを紹介します。...',
        description2: '2. 当社のダミー商品1つめを紹介します。...',
      },
      methods: {
        change: function() {
          this.headding = '当社のダミー商品2つめを紹介します。';
          this.description1 = '1. 当社のダミー商品2つめを紹介します。...';
          this.description2 = '2. 当社のダミー商品2つめを紹介します。...';
        },
      },
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
    <div id="app">
      <div>
        <div v-text="headding"></div>
        <div v-text="description1"></div>
        <div v-text="description2"></div>
      </div>
      <button @click="change">
        クリックしたら文章が変更される
      </button>
    </div>
[/code]

どこが悪かったかというと、このメソッドの定義です。

[code]

    change: function() {
      headding: '当社のダミー商品2つめを紹介します。',
    description1: '1. 当社のダミー商品2つめを紹介します。...',
    description2: '2. 当社のダミー商品2つめを紹介します。...'
    }
    
[/code]

オブジェクト初期化子（リテラル）と関数式が混ざったような形になっていますが、こういった構文は JavaScript にはありません。  
JavaScript の基礎の学習は前提として、ツール類の使い方として以下2点の改善をお勧めします。

  * きちんとインデントしてくれて、できれば構文エラーなども指摘してくれるエディタを使う
  * 常にブラウザの開発者ツールに出ているエラーなどを確認する

* * *

追記されたコードは HTML（テンプレート）部分が断片的なのでなんとも言えないですが、とりあえず、気付いた点は以下3つです。

  1. button 要素の中が空（変なボタンになると思います）
  2. data の初期値と change メソッドで設定している値が同じ（両方「当社のダミー商品2つめを紹介します。」）なので仮に正しく動いてもなにも変化しない
  3. change メソッドで `this` を忘れている

`v-text="headding"`
が解らないのであれば、まず[ドキュメント](https://jp.vuejs.org/v2/api/#v-text)を参照し、それでも解らなければ別の質問として投稿して下さい。


CC BY-SA 3.0
2017-07-21T14:35:17.797
36573
2017-07-22T02:54:57.147
2017-07-22T02:54:57.147
3054
3054
36569
answer