Метод Vue всегда вызывается (не только по нажатию)

Question

Я совсем новичок в Vue и все еще пытаюсь понять основы моего кода. Теперь у меня есть проблема с методом. Его следует вызывать только тогда, когда пользователь нажимает на кнопку. Но вместо этого это всегда называется. Я добавил alert () / console.log (), которые затем отображаются несколько раз.

вот код:

<template>
    <div>
        <center>
            <table>
                <tr>
                    <th><button  :on-click="click(1)" class="white1"><li v-bind:class="{'icon': containertyp[1] == 'l', 'iconLH': containertyp[1] == 'lh', 'iconBH': containertyp[1] == 'bh'}"></li></button></th>
                    <th><button  :on-click="click(2)" class="white1"><li v-bind:class="{'icon': containertyp[2] == 'l', 'iconLH': containertyp[2] == 'lh', 'iconBS': containertyp[2] == 'bs'}"></li></button></th>
                    <th><button  :on-click="click(3)" class="white1"><li v-bind:class="{'icon': containertyp[3] == 'l', 'iconLH': containertyp[3] == 'lh', 'iconBS': containertyp[3] == 'bs'}"></li></button></th> 
                <tr>    
            </table>
        </center>
    </div>
</template>

export default {
    data: function () {
        return {
            nr: [],
            containertyp: [],
        }
    },
    methods: {
        click(number) {

            for (var i = 0; i < 27; i++) {
                this.nr[i] = false;
                if (number == i) {
                    this.nr[i] = true;
                }
            };
            console.log(this.nr);
            EventBus.$emit('containerclicked');

        }
    }
}

Answer 1

Этот атрибут представляет собой странную смесь различных синтаксисов:

:on-click="click(1)"

Неясно, пытаетесь ли вы связать атрибут onclick элемента или (что более вероятно) добавить прослушиватель кликов Vue дляэлемент.

Скорее всего, что вы на самом деле хотите, это:

@click="click(1)"

@ является сокращением для v-on:, тогда как : в вашем исходном коде является сокращением дляv-bind:.Попытка связать атрибут с именем on-click совершенно допустима, но он будет рассматриваться как пользовательский атрибут, так как on-click на самом деле не вещь.Привязка оценивается во время рендеринга, чтобы определить значение атрибута, поэтому вы увидите запись во время рендеринга.

Answer 2

попробуйте передать событие методу обработчиков кликов click(number, event) и остановить распространение с помощью event.preventDefault().