質問: 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つめを紹介します。...'; }, }, }); ```
回答: 質問者さんのやりたい事をKesuiket さんの回答から類推して書き変えると下記のようになるかと思います。 ``` 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つめを紹介します。...'; }, }, }); ``` ``` クリックしたら文章が変更される ``` どこが悪かったかというと、このメソッドの定義です。 ``` change: function() { headding: '当社のダミー商品2つめを紹介します。', description1: '1. 当社のダミー商品2つめを紹介します。...', description2: '2. 当社のダミー商品2つめを紹介します。...' } ``` オブジェクト初期化子(リテラル)と関数式が混ざったような形になっていますが、こういった構文は JavaScript にはありません。 JavaScript の基礎の学習は前提として、ツール類の使い方として以下2点の改善をお勧めします。 * きちんとインデントしてくれて、できれば構文エラーなども指摘してくれるエディタを使う * 常にブラウザの開発者ツールに出ているエラーなどを確認する 追記されたコードは HTML(テンプレート)部分が断片的なのでなんとも言えないですが、とりあえず、気付いた点は以下3つです。 1. button 要素の中が空(変なボタンになると思います) 2. data の初期値と change メソッドで設定している値が同じ(両方「当社のダミー商品2つめを紹介します。」)なので仮に正しく動いてもなにも変化しない 3. change メソッドで `this` を忘れている `v-text="headding"` が解らないのであれば、まずドキュメントを参照し、それでも解らなければ別の質問として投稿して下さい。