up vote 0 down vote favorite

This is my index.html

<body>
    <app></app>
</body>

This is my main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: 'body',
  components: { App }
})

This is my App.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

and this is my Hello.vue

<template>
  <div class="hello">
    <h1>
        {{ msg }}
    </h1>
    <button v-on:click="showAlert">Click</button>
  </div>
</template>

<script>
export default {
  data () {
    return {

      msg: 'Hello World!'
    }
  },
  showAlert: () => {
    alert('test')
  }
}
</script>

Here is the error message from the Chrome console:

[Vue warn]: v-on:click="showAlert" expects a function value, got undefined (found in component: )

I can see "Hello world!" on my screen and the button but nothing happened when I click on it.

I suppose I will have "test" alert message.

Did I do something wrong?

share
    
print your console error messages here – Muhammed Irfan Sep 4 '16 at 15:26
up vote 1 down vote accepted

Your methods need to be in your methods section.

<script>
export default {
  data () {
    return {

      msg: 'Hello World!'
    }
  },
  methods: {
    showAlert: () => {
      alert('test')
    }
  }
}
</script>
share
    
Thanks for help!It works. If I change alert to " this.msg = this.msg.reverse()" and it show "Cannot read property 'msg' of undefined", why I can not access to msg? – Dreams Sep 4 '16 at 15:35
    
Shouldn't that just be alert(this.msg.reverse())? – ceejayoz Sep 4 '16 at 15:41
    
Actually, JS's reverse appears to be for arrays, not strings. – ceejayoz Sep 4 '16 at 15:41
    
What I want is to never hello world on screen when I click button – Dreams Sep 4 '16 at 15:41
    
@aBloomer What do you mean? hello world is in the screen because you have <h1>{{ msg }}</h1> in the template. – ceejayoz Sep 4 '16 at 15:42
up vote 1 down vote 
methods: {
    showAlert: () => {
    alert('test')
  }
}
share
    
I don't think events is the right spot for this. – ceejayoz Sep 4 '16 at 15:32
    
Methods is the correct. – Masterakos Sep 4 '16 at 15:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.