Question

我有两个v-on：点击附加到html元素的事件。一个调用方法1工作，但另一个不起作用。我无法想象这是什么问题。我在控制台中没有错误

继承整个html页面。

<div class="col-md-10" id="deckBuilder">
    <button class="ClassTabs" id="classCardsTab">"@ViewData["ClassChoice"]"</button>
    <button class="ClassTabs" id="neutralCardsTab">Neutral</button>
    <div class="well col-md-9" id="classCards">
        @foreach (var card in Model.ClassCards)
        {
            <img v-on:click="addCard" class="card" id="@card.CardID;@card.Name" style="width:200px;height:260px;" src="@Url.Content(card.Image)" alt="@card.Name" />
        }
    </div>
    <div class="well col-md-3" id="tableWrapper">
        <table id="deckTable">
            <tr>
                <th colspan="3" style="font-size:24px;"><input style="text-align:center;" placeholder="My @ViewData["ClassChoice"] Deck" v-model="deckName" /></th>
            </tr>
            <tr>
                <th style="text-align:center;font-size:20px;">Name</th>
                <th style="text-align:center;font-size:20px;">Count</th>
                <th></th>
            </tr>
        </table>
    </div>
    <div class="well col-md-9" id="neutralCards">
        @foreach (var item in Model.NeutralCards)
        {
            <img v-on:click="addCard" class="card" id="@item.CardID;@item.Name" style="width:200px;height:260px;" src="@Url.Content(item.Image)" alt="@item.Name" />
        }
    </div>

</div> 

@section Scripts {
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var deckBuilder = new Vue({
            el: '#deckBuilder',
            data: {
                deckList: [],
                deckCards: 0,
                deckName: ''
            },
            methods: {
                addCard: function(event) {
                    var count = 0;
                    var foundCard = false;
                    var cardInfo = event.path[0].id.split(';');
                    var cardId = cardInfo[0];
                    var cardName = cardInfo[1];
                    var deckTable = document.getElementById('deckTable');
                    var row;
                    for (var i = 0; i < this.deckList.length; i++) {
                        if (this.deckList[i].id === cardId && this.deckList[i].count < 3 && this.deckCards < 30) {
                            this.deckList[i].count++;
                            foundCard = true;
                            this.deckCards++;
                            for (var x = 0; x < deckTable.rows.length; x++) {
                                if (deckTable.rows[x].id === cardId) {
                                    deckTable.rows[x].cells[1].innerHTML = this.deckList[i].count;
                                    break;
                                }
                            }
                            break;
                        } else if (this.deckList[i].id === cardId && this.deckList[i].count === 3 && this.deckCards < 30) {
                            alert('Deck limit reached for this card.');
                            foundCard = true;
                            break;
                        }
                    }
                    if ((this.deckList.length === 0 || !foundCard) && this.deckCards < 30) {
                        this.deckList.push({ id: cardId, count: 1 });
                        this.deckCards++;
                        row = deckTable.insertRow(-1);
                        row.insertCell(0).innerHTML = '<a class="cardLink" href="@Url.Action("Details", "Cards")/' + cardId + '" >' + cardName + '</a>';
                        row.insertCell(1).innerHTML = 1;
                        row.insertCell(2).innerHTML = '<button v-on:click="removeCard">X</button>';
                        row.id = cardId;
                    }
                    console.log(this.deckCards);
                },
                removeCard: function (event) {
                    console.log("remove card");
                }
            }
        })
    </script>
}

Answer 1

您可以尝试这样写：

var vueInstanct = new Vue({
    el: "#myVueInstance",
    methods: {
        method1() { 
            console.log('method1 hit'); 
        },
        method2() { 
            console.log('method2 hit'); 
        }
    }
})

但是你的代码似乎没有任何问题...也许发布这些方法附加的html元素？可能是那里的东西。

不能让vuejs实例中的多个方法工作

1 个答案: