Как отобразить ссылку на кнопку с vue.js?

Question

мой взгляд, как это:

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

Мой компонент, как это:

<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> 

Когда нажатие кнопки любимый, он будет вызывать контроллер на Laravel

я зарегистрироваться на приложение .js вот так:

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

При исполнении, кнопка не отображается.

Пожалуйста, помогите.

UPDATE

Там существует ошибка, как это:

[Вью предупредит]: Неизвестный пользовательский элемент: - Вы зарегистрировать компонент правильно? Для рекурсивных компонентов обязательно укажите параметр «имя». (Находится в корневой инстанции)

В то время как я был зарегистрировать его

Answer 1

Три исправления, которые я могу видеть ...

Во-первых, опустим name: 'AddFavoriteProduct' в компоненте (это не требуется для компонентов одного файла) и использовать kebab-case для компонента в шаблоне.Во-вторых, по всей видимости, с отсутствующим id-product проп

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

В-третьих, не следует использовать интерполяцию в связанных свойств, и вы даже не нужно передавать ничего, кроме $event к вашему методу addFavoriteProduct

@click="addFavoriteProduct($event)" 

Answer 2

Вы получаете какую-либо ошибку?

Одна ошибка, которую я вижу в вашем коде, вы принимаете один параметр: событие, пока вы пытаетесь передать {{ $product->id }}, что кажется переменной laravel. (К сожалению, я не знаю Laravel)

Если вы хотите, как событие и product->id в методе, вы должны пройти оба параметра из HTML, как это в docs с помощью $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> 

Другой проблема вы ожидаете подпорку idProduct, которая не передается компоненту, вы должны пройти его, как это в kebab-case:

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

Answer 3

HTML нечувствителен к регистру, поэтому ваш заказ Кнопка элемент <AddFavoriteProduct></AddFavoriteProduct> интерпретируется как ваши отчеты предупреждения Vue: <addfavoriteproduct>

Когда вы называете ваш компонент с верблюжьего или PascalCase, соответствующее имя тега вы должны использовать в разметке должны быть кебаб-обсаженных так: <add-favorite-product></add-favorite-product>

Vue знает, как сделать преобразование из «штриховой буквы» в «заглавную букву».

Answer 4

Я не привык к vuex, так как я обычно реализую свой собственный магазин как объект POJO - не закончил с кривой обучения vuex. Таким образом, не может обеспечить рабочий раствор с vuex, однако, насколько мне известно, вам нужно импортировать вид действия (ы) в компоненте - вы можете попробовать ниже

<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); 
      } 
     }, 
    } 

Примечание: Из Vuex2 store.dispatch() принимает только один аргумент (не проблема с текущим прецедентом), однако, если вам нужно передать несколько аргументов, чтобы ваши действия вы можете работать вокруг как

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