I practice, I make a basket of orders on Vue.js. The main code is:

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

In the script.js file, I track the #cart element and create the position component:

  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 : ''; } } });

In the console, when you hover on the basket in the browser, an error is displayed:

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

I understand that I sort of misplaced everything, but I cannot understand what the error is, I just learn, I can not understand the elementary.

    1 answer 1

    In the view, inside each template there must be any root tag.

    You should look something like this:

     template:` <div> {{ getName(index) + " - " + item }} <button class="glyphicon glyphicon-remove btn btn-danger" @click="removeFromCart(index)" ></button> </div>`
    • Thanks, that's for sure. True, there were still a lot of problems, but your help and documentation helped me cope with this basket, although it works, but I doubt the quality of the performance. - JohnRoget