点击按钮调用app.blade.php中的Vue.js函数

Question

Hy Guys，

我需要在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>

默认情况下，laravel将在resourcesjsapp.js中包含Vue JS包

在您的resourcesjscomponentsExampleComponent.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!")
}
}
})

@点击＝"；changeItem"；它是v-on:click="；changeItem"；

请阅读此