Практикуюсь, делаю корзину заказов на Vue.js. На главной код такой:
<div class="cart text-center" id="cart">
<span class="glyphicon glyphicon-shopping-cart" @mouseover="showCart">Cart</span>
<ul class="list-group">
<li is="position" class="list-group-item" v-for="(item, index) in cart" v-bind:key="index" v-bind:item="item"></li>
</ul>
</div>
в файле script.js отслеживаю элемент #cart и создаю компонент position:
new Vue({
el: '#cart',
data: {
cart: '',
products: this.products
},
methods: {
showCart(){
this.cart = JSON.parse(localStorage.getItem('cart'));
var result = this.cart.reduce(
function(acc, el) {
acc[el] = (acc[el] || 0) + 1;
return acc;
}, {});
return this.cart = result;
}
}
});
Vue.component('position', {
template: '{{ getName(index) + " - " + item }}<button class="glyphicon glyphicon-remove btn btn-danger" @click="removeFromCart(index)"></button>',
props: ['index', 'item'],
methods: {
removeFromCart(id){
this.cart = JSON.parse(localStorage.getItem('cart'));
var i = cart.indexOf(id);
if (i !== -1) cart.splice(i, 1);
return localStorage.setItem('cart', JSON.stringify(cart));
},
getName(index){
return products[index-1].name ? products[index-1].name : '';
}
}
});
В консоли при наведении на корзину в браузере отображается ошибка:
[Vue warn]: Error compiling template:
{{ getName(index) + " - " + item }}<button class="glyphicon glyphicon-remove btn btn-danger" @click="removeFromCart(index)"></button>
- text "{{ getName(index) + " - " + item }}" outside root element will be ignored.
found in
---> <Position>
<Root>
Понимаю, что я вроде неправильно все расположил, но не могу понять в чем ошибка, я только учусь, может элементарного не понимаю.