javascript - vuejs - ¿Cómo mostrar el enlace del botón con vue.js?

laravel+vue+example

Question

Mi opinión es así:

<div class="panel panel-default panel-store-info">
    ...
    <div id="app">
        <AddFavoriteProduct></AddFavoriteProduct>
    </div>
    ....
</div>

Mi componente es así:

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})">
        <span class="fa fa-heart"></span>&nbsp;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>

Cuando haga clic en el botón favorito, se llamará controlador en la laberinto

Me registré en la aplicación .js así:

...
import AddFavoriteProduct from ''./components/AddFavoriteProduct.vue'';
...
components: {
                ...
                AddFavoriteProduct
            },
...

Cuando se ejecuta, el botón favorito no aparece.

Por favor ayuda.

ACTUALIZAR

Existe un error como este:

[Advertencia Vue]: elemento personalizado desconocido: - ¿ha registrado el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre". (encontrado en la instancia raíz)

Mientras que yo lo había registrado

Answer 1

¿Estás recibiendo algún error?

Un error que veo en su código es que está tomando un parámetro: evento, mientras está tratando de pasarle {{ $product->id }} , que parece una variable de laravel. (Lo siento, no sé laravel)

Si quieres tanto el evento como el product->id en el método, debes pasar ambos parámetros desde HTML, como en los documentos con la ayuda de $event

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }},  $event)">
        <span class="fa fa-heart"></span>&nbsp;Favorite
    </a>
</template>

<script>
    export default{
        name: ''AddFavoriteProduct'',  // I am not sure if name is needed, don''t remember seeing it in docs
        props:[''idProduct''],
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                this.$store.dispatch(''addFavoriteProduct'', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        }
    }
</script>

Otro problema es que está esperando un idProduct prop, que no se está idProduct a componente, debe pasarlo así en kebab-case :

<div class="panel panel-default panel-store-info">
    ...
    <div id="app">
        <AddFavoriteProduct id-product="4"></AddFavoriteProduct>
    </div>
    ....
</div>

Answer 2

HTML no distingue entre mayúsculas y minúsculas, por lo que su elemento de botón personalizado <AddFavoriteProduct></AddFavoriteProduct> se interpreta como sus informes de advertencia de Vue: <addfavoriteproduct>

Cuando nombra su componente con camelCase o PascalCase, el nombre de etiqueta correspondiente que debe usar en su marcado debe ser kebab-cased como sigue: <add-favorite-product></add-favorite-product>

Vue sabe hacer la conversión de "letra de tablero" a "letra mayúscula".

Answer 3

No estoy acostumbrado a vuex , ya que generalmente implemento mi propia tienda como un objeto POJO, no graduado con la curva de aprendizaje de vuex. Por lo tanto, no puedo proporcionar una solución de trabajo con vuex, sin embargo, que yo sepa, debe importar las acciones en su componente; puede probar la siguiente información

<template>
<a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }},  $event)">
    <span class="fa fa-heart"></span>&nbsp;Favorite
</a>
</template>

<script>
    export default{
        props:[''idProduct''],
        vuex: {
            actions: {
                setFavoriteProduct: setFavoriteProduct
                // assuming you named the action as setFavoriteProduct in vuex
                // avoid duplicate naming for easy debugging
            }
        }
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                // this.$store.dispatch(''addFavoriteProduct'', payload)
                this.setFavoriteProduct(payload);
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        },
    }

Nota: Desde Vuex2 el store.dispatch() acepta solo un argumento (no es un problema con su caso de uso actual), sin embargo, si necesita pasar múltiples argumentos a su acción puede trabajar como

store.dispatch(''setSplitData'',[data[0], data [1]])

// in the action:
setSplitData (context, [data1, data2]) { // uses ES6 argument destructuring

    OR

//... with an object:
store.dispatch(''setSplitData'',{ 
  data1: data[0], 
  data2: data [1],
})

// in the action:
setSplitData (context, { data1, data2 }) { // uses ES6 argument destructuring
//source: LinusBorg''s comment at https://github.com/vuejs/vuex/issues/366

Answer 4

Tres soluciones que puedo ver ...

Primero, omita el name: ''AddFavoriteProduct'' en su componente (no es necesario para los componentes de un solo archivo) y use kebab-case para el componente en su plantilla. En segundo lugar, parece que le falta el id-product prop

<add-favorite-product :id-product="someProductIdFromSomewhere"></<add-favorite-product>

En tercer lugar, no utiliza la interpolación en propiedades enlazadas y ni siquiera necesita pasar nada que no sea el $event a su método addFavoriteProduct

@click="addFavoriteProduct($event)"