单击按钮

Question

伙计们，

我需要在app.blade.php文件中调用Vue.js函数。它应该在单击按钮时触发。

这是我使用的代码示例。

<button onclick="changeItem()">Saved Items</button>

changeItem()是Vue.js函数。

请帮助:)

Answer 1

在您的app.blade中定义组件

<div id="app">
   <example-component></example-component>
</div>

defualt laravel将在resources\js\app.js中包含Vue JS软件包

在您的resources\js\components\ExampleComponent.vue中（以下代码）

<template>

    <button  v-on:click="say">Say what</button>

</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },

  // define methods under the `methods` object
  methods: {
    say: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName + " Clicked ")
      }
    }
  }
    }
</script>

运行：npm run watch // To compile app.js

请 mark/upvote，如果发现有帮助：）

Answer 2

<div id="app">
  <button @click="changeItem">
    {{message}}
  </button>
</div>

new Vue({
  data: {
    message: "Save Items"
  },
  methods: {
    changeItem() {
        alert("Clicked!")
    }
  }
})

@ click =“ changeItem”，是v-on的缩写：click =“ changeItem”

Please read this