0

追記: 自己解決しました


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Vue.js Practice</title>
</head>
<body>
  <div id="myCounter">
    <div>{{ count }}</div>
    <button v-on:click="count ++">Up</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#myCounter',
      data: {
        count: 0
      },
      methods: {
        countUp: function(){
          this.count++;
        }
      }
    });
  </script>
</body>
</html>

サンプルをみてカウンターを作りました。
ページ内に複数のカウンターを設置して、それぞれの値が連動するようにするにはどうしたらよいのでしょうか。

6
  • 「それぞれの値が連動する」とは具体的にどのようなことですか?例えばカウンタ1が10になるとカウンタ2が1つ繰り上がるとか?
    – BLUEPIXY
    Commented 2017年6月9日 2:48
  • カウンタ1とカウンタ2が持っているcountという値が常に同じということです。カウンタ1がカウントアップすれば、カウンタ2もカウントアップするというように。
    – snxpwf
    Commented 2017年6月9日 3:09
  • <div id="myCounter"> 配下であれば<div>{{ count }}</div>をもう一つ置くことで同じ値を表示できます。
    – BLUEPIXY
    Commented 2017年6月9日 3:18
  • 例えば「いいね 」ボタンのように記事の上と下に表示させたいという場合など、遠くにまたがっている場合はどうしたらよいのでしょうか。
    – snxpwf
    Commented 2017年6月9日 3:51
  • 1
    同じ配下にあれば離れていても大丈夫です。
    – BLUEPIXY
    Commented 2017年6月9日 4:06

1 件の回答 1

1

他にも方法はあると思いますが、
同じ値を表示するだけなら、
単に同じ<div id="myCounter">配下に複数配置するだけでよいです。
これが単純で簡単な実現方法だと思います。
「遠くにまたがって」いても大丈夫です。

<div id="myCounter">
    <div>{{ count }}</div>
    <button v-on:click="count ++">Up</button>
    <div>
    別の内容<br />
    あれや<br />
    これや<br />
    間に色々ある<br />
    </div>
    <div>{{ count }}</div>
    <button v-on:click="count ++">Up</button>
</div>
2
  • 単一ファイルコンポーネント化した場合に「別の内容」の部分が辛くなりそうに感じています。 既存のブログの記事などはサーバーサイドでレンダリングされているので、たとえば底に組み込みたくなった場合は記事もajaxで取得しなければならず辛くなりそうに感じています。 SPAよりにならずに、どうにか小さく始めたいのですが。
    – snxpwf
    Commented 2017年6月9日 4:10
  • 問題になる状況がいまいちよくイメージできないので、質問を編集して問題となるような状況を具体的に、追加して説明して頂けますか?
    – BLUEPIXY
    Commented 2017年6月9日 4:20

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

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