Vue.jsでクリックイベントが発生しないのはなぜですか？

Question

Vueのon-clickディレクティブをdivで使用しようとしていますが、意図したとおりに起動しません。 .demoクラスをクリックしても何も起こりません。私はコンソールで「テストクリック」を取得する必要があります。私はコンソールにエラーがないので、私は何が間違っているのか分かりません。

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    title: 'This is the first vue app', 
 
    name: 'ALRAZY', 
 
    link: 'http://google.com', 
 
    attachRed: false 
 
    }, 
 
    methods: { 
 
    changeLink: function() { 
 
     this.link = 'http://apple.com' 
 
    } 
 
    } 
 
})

body { 
 
    font-family: 'Trykker', 'Spectral SC', serif; 
 
} 
 

 
h1,h2,h3,h4,h5,h6 { 
 
    font-family: 'Spectral SC', serif; 
 
} 
 

 
p { 
 
    font-family: 'Trykker', serif; 
 
} 
 

 
.demo { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: grey; 
 
    display: inline-block; 
 
    margin: 10px; 
 
} 
 

 
.red { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600|Trykker" rel="stylesheet" > 
 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div id="app"> 
 
     <h1>{{ title }} </h1> 
 
     <input type="text" v-model="name" name=""> 
 
     <p> {{ name }}</p> 
 
     <button onclick="changeLink" class="btn btn-danger btn-lg">click to change</button> 
 
     <a :href="link" target="_blank">Link</a> 
 
     <!-- style-vue --> 
 
     <div class="demo" onclick="attachRed = !attachRed" :class="{red: attachRed}"></div> 
 
     <p v-if="show">You can see me!!!</p> 
 
     <p v-else>Do You see me??</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはVUEのメソッドをトリガーするつもりはない標準onclick属性を使用しています。 v-on:click="changeLink()"または@click="changeLink()"を使用してください（2番目の構文が正しいかどうかは完全にはわかりません）。それはあなたの問題を解決するはずです。

同様に、あなたは@click="attachRed = !attachRed"を行うことができます。