cant get multiple methods in vuejs instance to work

Question

I have two v-on:click events attached to html elements. the one calling method1 works but the other one doesnt work. i cant imagine what the issue is. i have no errors in the console

heres the the entire html page.

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

Yup, as wostex proved, everything is ok. There must be issues elsewhere, care to show more of the problematic code? — mzgajner
– mzgajner, Commented Apr 23, 2017 at 9:47
@mzgajner. The above example is a contrived one but it should represent the problem and it's structure exactly. However, I will edit and post my exact code. — tocoolforscool
– tocoolforscool, Commented Apr 23, 2017 at 17:58
@mzgajner this code produces the button perfectly. I can inspect the html elements and see that the <button v-on:click="removeCard"> has been generated properly via the innerHTML assignment. — tocoolforscool
– tocoolforscool, Commented Apr 23, 2017 at 18:12
I had this problem too. Eventually I managed to fix it by rejiggering the formatting of where the comma was, etc. No idea what was actually causing the problem. — Warren Dew
– Warren Dew, Commented Aug 15, 2019 at 19:11

gb_spectrum · Accepted Answer · 2017-04-23 06:10:03Z

1

You could try writing it like this:

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

But there doesn't seem to be anything wrong with your code... maybe post the html elements these methods are attached to? Could be something there.

answered Apr 23, 2017 at 6:10

gb_spectrum

2,3018 gold badges37 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tocoolforscool Over a year ago

it actually is written like that in my program i just shortened it for th example.

Collectives™ on Stack Overflow

cant get multiple methods in vuejs instance to work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related