-1

Vue.jsがうまくいきません
の続き

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

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

追記

mjy さんの回答を元に書きなおしたのですが、やはりうまくいきません。

    <button @click="change"> </button>

    <p id="description1">
    {{ description1 }}
</p>
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つめを紹介します。...';
        },
  },
});
6
  • 3
    「うまくいかない」ということを説明するためには、したいことと、今の状況と、望ましい状況と何が違うのかの3点を質問文に含めると説明しやすいと思います。このスクリプトを動かしたときのどの動作が想定と違うのかを本文に書いてみてください。また、スクリプトに小さな打ち間違いがあるようです。
    – nekketsuuu
    2017年7月21日 13:44
  • やりたいことはmjyさんの提示されたものその物です。タイプミスがどうしても見つかりません。ご存知なら記載いただけませんか 2017年7月22日 0:45
  • 瑣末なことですが、最初の button タグが閉じていません。(スクリプトと言ったのが悪かったかもしれません、すいません)
    – nekketsuuu
    2017年7月22日 0:52
  • 1
    今回の件とは関係ない部分ですがのちの方のために修正しておきました 2017年7月22日 1:03
  • ちなみに、最初の表示がうまくいかないんでしょうか?それともボタンをクリックしても反応しないということでしょうか?
    – Kesuiket
    2017年7月22日 4:41

1 件の回答 1

1

質問者さんのやりたい事を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つめを紹介します。...';
    },
  },
});
<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>

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

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" が解らないのであれば、まずドキュメントを参照し、それでも解らなければ別の質問として投稿して下さい。

6
  • <p> {{ description1 }} </p> という形が多いですが v-text="headding"という形でも同じことが出来るという事でしょうか?オブジェクトのバリューに関数が入る形はJSでは存在しないのでエラーになるという事でしょうか? 2017年7月22日 0:55
  • 教えていただいたものを参考に変更しましたがやはりうまくいきません質問欄に記載しましたのでご確認いただけますと幸いです。 2017年7月22日 1:29
  • @mjy追記見ていただけましたか? 2017年7月26日 2:08
  • ありがとうございます。this.headdingのthisは<div id="app">の子要素であるv-text="headding"の中に指定のテキストを入れるという意味でよいでしょうか? 2017年7月26日 3:16
  • @nicomesecond 結果としては、おっしゃる通りの事が起きるはずです。メソッドの仕様は、まずドキュメント を読んで、解らなければ質問として投稿して下さい。
    – mjy
    2017年7月26日 4:23

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

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