Vue установленное событие не "работает"

Question

Я пытаюсь создать страницу, где переменная должна быть установлена, как только страница загружена. Я поместил свой метод и попытался отладить его несколько раз, но безрезультатно, затем я попытался просто напечатать строку на консоль на mounted, но ничего не произошло ... Я не уверен, что что-то упустил.

Я строю свой проект, используя Vue CLI, и в данный момент в следующем коде я собираюсь вставить изменения в HelloWorld.vue из шаблона

Я добавил кнопку в качестве проверки,

      <button onclick="foo">foo</button>

сценарий страницы выглядит так:

  <script>
export default {
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    mounted: function() {
      console.log("Mounted!")
    },
    foo: function() {
      console.log("button")
    }
  }
}
</script>

ожидаемое поведение - получить "Монтируется!" на консоли при сохранении и обновлении, и «кнопка» всякий раз, когда я нажимаю кнопку. Я ничего не получаю при отображении страницы, и при нажатии кнопки появляется только «кнопка». mounted неправильная функция для использования здесь или я что-то упустил?

Answer 1

Не проблема здесь, но я испытал то же самое, когда забыл включить закрывающий тег </script>. На всякий случай это спасет кого-то еще от царапин на голове ...

Answer 2

Ах. Это простая и распространенная ошибка, которую делают люди. Вот как на самом деле вы должны писать смонтированный.

 <script>
export default {
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
foo: function() {
  console.log("button")
 }
},
 mounted: function() {
  console.log("Mounted!")
 },
}
</script>

установленный должен быть на одном уровне с методами, данными или вычисленными. Не внутри методов.

Вот и все, теперь это должно работать.

Надеюсь, это поможет.