Как работать с полученным HTML во vue?

Question

[pegas]

C api сервера приходит HTML с товарами:

<div class="product" data-id="0">
  <button>кнопка</button>
</div>
<div class="product" data-id="1">
  <img src="/imges/name.png" alt="" class="product__img">
  <button>кнопка</button>
</div>

Как работать с этим html во вью?
Как сделать чтобы при нажатии на кнопку вызывался метод c аргументом id-товара, например test(id)?

работать как с обычным компонентом

<div class="product" v-for="item in poducts" :key="item.id">
  <div class="product__name">{{ item.name }}</div>

  <button @click="test(item.id)">кнопка</button>
</div>

Answer 1

[0xD34F]

Лучше никак. Измените api так, чтобы получать json вместо html, и создавайте разметку из данных средствами vue.

Ну а так-то можно делегированием воспользоваться:

<div v-html="свойствоСодержащееHTML" @click="onClick">

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      const id = e.target.closest('.product').dataset.id;
      ...
    }
  },
  ...
},

https://jsfiddle.net/grfo05vm/

Answer 2

[Константин Ишеков]

Можно просто повесить на эти кнопки событие, а в нем прослушку через event bus. А в нужном компоненте слушать его в mounted и отправлять в нужный метод
На скорую руку накидал, чтобы суть была понятна:
main.js

import Cart from './components/Cart'
import EventBus from './common/event-bus.js';

var app = new Vue({
    el: '#app',
    components: {
        Cart
    },
    mounted() {
       document.addEventListener('click', addProduct, false);
       function addProduct(event) {
            if (event.target.classList.contains('btnToCart')) {
                  EventBus.$emit('changeCart', 'твой атрибут сюда');
            }
       }
    }
})

cart.vue

import EventBus from '../common/event-bus.js'
export default {
    data() {
        return {
            content: {}
        };
    },
    mounted() {
        EventBus.$on('changeCart', array => {
            this.addProduct(array);
        });
    },
    created() {
    },
    methods: {
        addProduct(newItem){
           console.log(newItem)
        },
    }
}

Answer 3

[Alex]

Или можно затащить в рантайм компилятор шаблонов. И возвращать с сервера именно

<div class="product" v-for="item in poducts" :key="item.id">
  <div class="product__name">{{ item.name }}</div>

  <button @click="test(item.id)">кнопка</button>
</div>

, компилировать это на лету и монтировать как компонент.

Но это тоже не очень хорошо. И годится только как запасной вариант, если ничего другого сделать невозможно.