如何使用 vue.js 显示按钮链接? [英] How to display button link with vue.js?
问题描述
我的观点是这样的:
...<div id="应用程序"><AddFavoriteProduct></AddFavoriteProduct>....
我的组件是这样的:
<a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})"><span class="fa fa-heart"></span> 收藏夹</a><脚本>导出默认{name: '添加收藏夹产品',道具:['idProduct']，方法:{添加收藏夹产品(事件){event.target.disabled = trueconst payload= {id_product: this.idProduct}this.$store.dispatch('addFavoriteProduct', payload)设置超时(函数(){location.reload(真)}, 1500);}}}点击收藏夹按钮时，会调用laravel上的控制器
我像这样在 app.js 上注册了:
<代码>...从'./components/AddFavoriteProduct.vue'导入AddFavoriteProduct；...成分: {...添加收藏产品},...执行时，按钮收藏夹不会出现.
请帮忙.
更新
存在这样的错误:
<块引用>[Vue 警告]:未知的自定义元素:-您是否正确注册了组件?对于递归组件，请确保提供名称"选项.(在根实例中找到)
虽然我已经注册了
我能看到的三个修复...
首先，在您的组件中省略 name: 'AddFavoriteProduct'(单文件组件不需要)并使用 kebab-case 用于模板中的组件.其次，您似乎缺少 id-product 道具
<add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>第三，您不在绑定属性中使用插值，您甚至不需要将 $event 以外的任何内容传递给您的 addFavoriteProduct 方法
@click="addFavoriteProduct($event)"My view is like this :
<div class="panel panel-default panel-store-info">
...
<div id="app">
<AddFavoriteProduct></AddFavoriteProduct>
</div>
....
</div>
My component is like this :
<template>
<a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})">
<span class="fa fa-heart"></span> Favorite
</a>
</template>
<script>
export default{
name: 'AddFavoriteProduct',
props:['idProduct'],
methods:{
addFavoriteProduct(event){
event.target.disabled = true
const payload= {id_product: this.idProduct}
this.$store.dispatch('addFavoriteProduct', payload)
setTimeout(function () {
location.reload(true)
}, 1500);
}
}
}
</script>
When click button favorite, it will call controller on the laravel
I had register on the app.js like this :
...
import AddFavoriteProduct from './components/AddFavoriteProduct.vue';
...
components: {
...
AddFavoriteProduct
},
...
When executed, the button favorite does not appear.
Please help.
UPDATE
There exist error like this :
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)
Whereas I had register it
Three fixes that I can see...
First, omit name: 'AddFavoriteProduct' in your component (it's not required for single-file components) and use kebab-case for the component in your template. Second, you appear to be missing the id-product prop
<add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>
Third, you don't use interpolation in bound properties and you don't even need to pass anything other than the $event to your addFavoriteProduct method
@click="addFavoriteProduct($event)"
这篇关于如何使用 vue.js 显示按钮链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
