Почему моя функция оповещения не работает, когда я нажимаю на кнопку в Vue.JS

Почему моя функция оповещения не работает, когда я нажимаю на кнопку в Vue.JS

04.09.2016 06:22:58 Просмотров 20 Источник

Это мой индекс.HTML

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

Это мое главное.JS

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

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

Это мое приложение.вю

<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>

а это мой привет.вю

<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>

Вот сообщение об ошибке из консоли Chrome:

[Vue warn]: v-on: click= "showAlert" ожидает значение функции, полученное неопределенным (найдено в компоненте: )

Я вижу: "Привет, мир!"на моем экране и кнопка, но ничего не произошло, когда я нажал на нее.

Я полагаю, что у меня будет" тестовое " предупреждающее сообщение.

Я сделал что-то не так?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js#comment65969022_39318488
распечатайте сообщения об ошибках консоли здесь

Ответы - Почему моя функция оповещения не работает, когда я нажимаю на кнопку в Vue.JS / Why my alert function is not working when I click on button in Vue.js

Kostas

04.09.2016 06:31:24

methods: {
    showAlert: () => {
    alert('test')
  }
}
Является ответом!
ceejayoz

04.09.2016 06:31:58

Ваши методы должны быть в methods

https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969197_39318576
Спасибо за помощь!Это работает. Если я изменю предупреждение " это.msg = это.глутамат натрия.reverse () "и он показывает" не может прочитать свойство ' msg 'из undefined", почему я не могу получить доступ к msg?
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969324_39318576
Разве это не должно быть просто alert(this.msg.reverse())?
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969329_39318576
На самом деле, reverse, похоже, предназначена для массивов, а не строк.
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969330_39318576
Что я хочу, так это никогда не здороваться с миром на экране, когда я нажимаю кнопку
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969340_39318576
@aBloomer что ты имеешь в виду? hello worldнаходится на экране, потому что у вас есть <h1>{{ msg }}</h1>в шаблоне.
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969343_39318576
Я воспользуюсь этим.msg = это.глутамат натрия.расщеплять('').обратный().присоединиться()
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969363_39318576
Я думал, что он будет рендерить, потому что я изменяю msg
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969373_39318576
Да, он будет повторно визуализироваться, если вы измените this.msg. Проверьте свою консоль и опубликуйте пример через что-то вроде Codepen, если это не так.
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969384_39318576
моя консоль просто показывает "TypeError: не удается прочитать свойство' msg ' из undefined"
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969465_39318576
Поместите копию этого кода на Codepen, чтобы мы могли посмотреть. Это означает, что это не то, что должно быть, а значит, происходит что-то еще.
https://stackoverflow.com/questions/39318488/why-my-alert-function-is-not-working-when-i-click-on-button-in-vue-js/39318576#comment65969648_39318576
Спасибо за помощь. Я все понял. Я могу передать 'this' функции showAlert o'Clock, как v-on: click= " showAlert (this)", и получить msg от этого.msg затем изменить его.
Atchutha rama reddy Karri

03.06.2019 03:57:43

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

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
 methods: {
    showAlert: () => {
    alert('test')
  }
 }
}
</script>
mbokil

28.01.2020 10:39:34

Вот полезный способ, который я нашел, чтобы добавить предупреждения ко всем вашим выражениям, не добавляя метод к каждому компоненту Vue. Настройте путь обслуживания на все, что вы хотите.

Создайте файл с именем /src / services / utility.js и место в нем:

export default {
  methods: {
    //alert wrapper for template debugging
    alert(msg) {
      if (msg === undefined) msg = 'Undefined';
      if (msg === '') msg = 'Empty String';
      alert(msg);
    }
  }
}

Теперь о главном.js file импортируйте файл и установите его в качестве глобального микшера

import utility from '@/services/utility'
Vue.mixin(utility); 

И простая кнопка, чтобы проверить его

<button @click="alert('Meow!')">Make cat speak</button>
Закрыть X