Как передать атрибут в метод vue?

Question

[Nik1712]

Есть скрипт

var pathArray = location.href.split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

var itemlist = new Vue({
    el: '#itemlist',
    data: {
        json: null
    },
     methods: {
      getVariant: function (event) {
        var good = this.getAttribute('data-id');
        $.getJSON(url + good, function (json) {
          itemlist.json = json;
          console.log(itemlist.json);
      });
    }
  }
});

и html

<li class="color-variant__choose color-variant__choose_<?=$value?>" 
    data-id="12345" //к примеру, но вообще она может быть любой 
    v-on:click="getVariant"
>
</li>

выдает ошибку
vue_app.js:72 Uncaught TypeError: this.getAttribute is not a function

как передать значение атрибута data-id, чтобы не было ошибки?

Answer 1

[Evgeny Kulakov]

Чтобы получить доступ к DOM объекту в событии: event.target.

Comments

[v__e]

ага, только
если на jquery

$('.profile-1__form-input-edit').on('click', function(e) {
console.log($(this));
});
выведет элемент, по которому произошел клик

то на vue event.targer выведет, например, ребенка кликнутого элемента ( или :

Answer 2

[Антон Антон]

в данном конкретном случае - event.target.getAttribute, но я бы подумал, зачем дата-атрибут там вообще нужен...

Comments

[Nik1712]

чтобы получить информацию о том, по какому урлу делать запрос (в data-id есть то, что выводит сервер <?=(isset($data['id']) ? $data['id'] : "") ?> )

[Антон Антон]

Nik1712: может быть имеет смысл рендерить все данные с помощью vue?

Answer 3

[Максим]

Можно сразу в метод передавать содержимое атрибута:

<li class="color-variant__choose color-variant__choose_<?=$value?>" 
    v-on:click="getVariant('12345')"
>
</li>

methods: {
      getVariant: function (dataId) {
        $.getJSON(url + dataId, function (json) {
          itemlist.json = json;
          console.log(itemlist.json);
      });