доступа Vue переменная в расслоение плотной JQuery

Question

Вызов функции удара (после выбора) функции, я получаю следующее сообщение об ошибке:

Uncaught ReferenceError: selected is not defined

methods: { 
    select: function(event) { 
     selected = event.target.id 
    }, 
    strike: function(event) { 
     $(selected).toggleClass('strike') 
    } 
} 

Это работает с использованием JavaScript, document.getElementById(selected).classList.add('strike') но не JQuery.

Как определить selected для jQuery для доступа?

Answer 1

Вместо того, чтобы снова запросить DOM, было бы лучше, если вы сохраните ссылку на фактический элемент:

methods: { 
    select: function(event) { 
     this.selected = event.target; 
    }, 
    strike: function() { 
     $(this.selected).toggleClass('strike'); 
    } 
} 

Если вы не должны поддерживать старые браузеры IE, вы можете отказаться от JQuery здесь полностью, используя classList свойство:

methods: { 
    select: function(event) { 
     this.selected = event.target; 
    }, 
    strike: function() { 
     this.selected.classList.toggle('strike'); 
    } 
} 

Наконец, должен быть способ обрабатывать все это с помощью Vue в :class связывания в самом шаблоне. Если вы покажете нам шаблон, мы можем помочь вам его улучшить.

Answer 2

Потому что $() ожидает строку селектора CSS. Добавить #, чтобы обозначить это id.

$("#" + selected).toggleClass('strike')