1PeGaS
@1PeGaS

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

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>
  • Вопрос задан
  • 1793 просмотра
Пригласить эксперта
Ответы на вопрос 3
0xD34F
@0xD34F Куратор тега Vue.js
Лучше никак. Измените api так, чтобы получать json вместо html.

Ну или можете путём говнокодера пойти: v-html + делегирование.
Ответ написан
@MORD74
Можно просто повесить на эти кнопки событие, а в нем прослушку через 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)
        },
    }
}
Ответ написан
Kozack
@Kozack Куратор тега Vue.js
Или можно затащить в рантайм компилятор шаблонов. И возвращать с сервера именно
<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>
, компилировать это на лету и монтировать как компонент.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы