0

Практикуюсь, делаю корзину заказов на 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>

Понимаю, что я вроде неправильно все расположил, но не могу понять в чем ошибка, я только учусь, может элементарного не понимаю.

1 ответ 1

3

Во вью, внутри каждого темплейта обязан быть любой корневой тэг.

У вас должно выглядеть как-то так:

template:`
<div>
  {{ getName(index) + " - " + item }}
  <button
    class="glyphicon glyphicon-remove btn btn-danger" 
    @click="removeFromCart(index)"
  ></button>
</div>`
1
  • Спасибо, это точно. Правда там еще была куча проблем, но ваша помощь и документация помогли мне справиться с этой корзиной, хоть и работает, но в качестве исполнения сомневаюсь.
    – JohnRoget
    Commented 4 апр. 2018 в 12:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.