36430


vueと生のJSを使ってクリックすると内容が変化するようにしたかったのですが、うまくいきません。

[code]

    app = Vue$3 {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}
    
[/code]

と出てしまいますがこれはエラーでしょうか？

vueは生の関数は使えないが文法は使えると聞いているのですが、イベントリスナーやgetelementは使えないのでしょうか？

[code]

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

初心者なので、初心者でもわかるように教えていただければ幸いです。


CC BY-SA 3.0
2017-07-06T05:32:02.123
36137
2017-08-01T10:20:27.010
2017-07-18T13:11:36.237
24247
24247
question
vue.js
Vue.jsがうまくいきません


記述されているコードを実行してもエラーは出ませんでしたが、同じ変数名（ `var app` ）を何度も定義していることや、複数のVueインスタンス(`new
Vue({...})`) が存在することが影響しているのではないかと思います。

また、Vue.js を使う場合は特別な理由がなければ生のJSを使う必要はないので、  
例えば少し整理して書いてみると:  
（上のコード見た限り、ボタンをクリックすると文章が表示されるような感じでしょうか）

[code]

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

[code]

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

というように書けます。

どうしても生のJSでクリックイベントを書きたい場合は以下のように書けます:

[code]

    /* var app = new Vue({...}) の下側に書きます */
    var changeBtn = document.getElementById('changeBtn');
    changeBtn.addEventListener('click', function() {
      Vue.set(app, 'show', !app.show)
    })
    
[/code]


CC BY-SA 3.0
2017-07-16T19:33:02.960
36430
2017-07-18T08:09:27.613
2017-07-18T08:09:27.613
18392
18392
36137
answer


`data:{}`内で宣言されているプロパティを変更するにはただ代入します。`Vue.set`の必要性は次のURLに書かれてあり`new
Vue(...)`の外か中かは無関係です。<https://jp.vuejs.org/2016/02/06/common-gotchas/>

どうしても生のJSでクリックイベントを書きたい場合で、マウント要素の外にボタンを置く例:

[code]

    <div id="app">
      <div v-show="show">
        <div v-text="headding"></div>
        <div v-text="description1"></div>
        <div v-text="description2"></div>
      </div>
    </div>
    <button id="changeBtn">クリックしたら文章が表示される</button>
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        headding: '当社のダミー商品2つめを紹介します。',
        description1: '1. 当社のダミー商品2つめを紹介します。...',
        description2: '2. 当社のダミー商品2つめを紹介します。...',
        show: false
      }
    });
    var changeBtn = document.getElementById('changeBtn');
    changeBtn.addEventListener('click', function() {
      app.show = !app.show;
    }, false);
    </script>
    
[/code]


CC BY-SA 3.0
2017-08-01T10:20:27.010
36849
2017-08-01T10:20:27.010
9459
36137
answer