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

Я совсем новичок в 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');

        }
    }
}
0
задан undefined 26 June 2019 в 21:04
поделиться

2 ответа

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

:on-click="click(1)"

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

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

@click="click(1)"

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

2
ответ дан skirtle 26 June 2019 в 21:04
поделиться

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

0
ответ дан oezkany 26 June 2019 в 21:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: