CODEWITHSUNDEEP
vue.jsvuejs2
MD.ALIMUL Alrazy
MD.ALIMUL Alrazy

Reputation: 340

Why won't my click event in Vue.js fire?

I'm trying to use Vue's on-click directive on a div but it does not fire as intended. When I click the .demo class nothing happens; I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong. 

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>

Upvotes: 0

Views: 3123

Answers (1)

B. Fleming
B. Fleming

Reputation: 7230

You're using the standard onclick attribute which is not going to trigger vue methods. Try using v-on:click="changeLink()" or @click="changeLink()" (I'm not entirely sure if the second is the correct syntax). That should resolve your problem.

Similarly, you can do @click="attachRed = !attachRed".

Upvotes: 2

Related Questions