JavaScript — vuejs — Как добавить HTML с событием клика

vuejs — Как добавить HTML с событием клика

Я пытаюсь добавить пару кнопок с событием click, когда компонент смонтирован:

  data() { return { show_word: true, game: { //type: "memory, working memory", type: 1, name: "Symbols", start:false, total_combo:0, total_correct:0, total_incorrect:0, total_correct_in_a_row:0, max_correct_in_a_row:0, correct_percent:0, avg_time_for_ans:0, button: '{amp}lt;button @click="checkNumbers"{amp}gt;click{amp}lt;/button{amp}gt;', score_plus:0, score_multi:0, d_timer:600, finish:false, positive: null, negative: null, numbers_array:[], abuse: { clicks:5, seconds:1, max:3, flag: false } }, } }, methods:{ playGame(){ let tilesize = 50, tilecount = 6; $( '#numbersContainer' ).empty() let gRows = Math.floor($("#numbersContainer").innerWidth()/tilesize); let gCols = Math.floor($('#numbersContainer').innerHeight()/tilesize); let vals = _.shuffle(_.range(tilecount)); let xpos = _.shuffle(_.range(gRows)); let ypos = _.shuffle(_.range(gCols)); console.log(vals); console.log(xpos); console.log(ypos); let $this = this; _.each(vals, function(d,i){ var $newdiv = $('{amp}lt;button @click="checkNumbers(' (d 1) ')"/{amp}gt;').addClass("tile btn btn-info"); $this.game.numbers_array.push(d 1) $newdiv.css({ 'position':'absolute', 'left':(xpos[i] * tilesize) 'px', 'top':(ypos[i] * tilesize) 'px' }).appendTo( '#numbersContainer' ).html(d 1); }); }, checkNumbers($val){ console.log($val) }, } 

Это HTML, который я получаю:

 {amp}lt;div id="numbersContainer" class="col-ms-3"{amp}gt; {amp}lt;button @click="checkNumbers(6)" class="tile btn btn-info" style="position: absolute; left: 250px; top: 250px;"{amp}gt;6{amp}lt;/button{amp}gt; {amp}lt;button @click="checkNumbers(5)" class="tile btn btn-info" style="position: absolute; left: 150px; top: 150px;"{amp}gt;5{amp}lt;/button{amp}gt; {amp}lt;button @click="checkNumbers(1)" class="tile btn btn-info" style="position: absolute; left: 100px; top: 0px;"{amp}gt;1{amp}lt;/button{amp}gt; {amp}lt;button @click="checkNumbers(3)" class="tile btn btn-info" style="position: absolute; left: 50px; top: 100px;"{amp}gt;3{amp}lt;/button{amp}gt; {amp}lt;button @click="checkNumbers(2)" class="tile btn btn-info" style="position: absolute; left: 200px; top: 200px;"{amp}gt;2{amp}lt;/button{amp}gt; {amp}lt;button @click="checkNumbers(4)" class="tile btn btn-info" style="position: absolute; left: 0px; top: 50px;"{amp}gt;4{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; 

Проблема в том, что событие «click» не работает. Похоже, функция «checkNumbers» не зарегистрирована, хотя она зарегистрирована в моих методах.

Как правильно добавить элемент html к событиям регистра?

Благодарю

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector