Как в vue заменить строку на html тег с аттрибутом vue?

Question

[polzovatel_vue]

Есть небольшая проблема.
К примеру, есть текст:

В этом тексте заменить <att>5451</att> на картинку

Есть скрипт который отрабатывает, и меняет "5451" На ""

array.data.attachments.map((img) => {
                array.data.body =  array.data.body.replace('<att>5451</att>', '<img @click="open('+img.id+')" src="https://example.ru/files/'+img.filename+'">');
            });

Он заменит на картинку и она выведется, но атрибут @Click так и останется просто атрибутом, а не атрибутом vue, который должен отработать клик.

Помогите, как его сделать атрибутом vue?

Comments

[Aetae]

Ты не должен получать с сервера никакого html. Только данные.
И уже данные у тебя vue преобразует в нужный html по нужным условиям.

Если хочешь говнокодить и работать в с html - забудь о vue, работай по старому: querySelector, addEventListener и т.д., и т.п.

Answer 1

[insphoto]

Сделай через v-if по нормальному, не надо замены в доме такие производить.

Comments

[polzovatel_vue]

Да я и не хотел бы так делать, но по-другому и не знаю как. Надо найти конкретный id в тексте и заменить его на картинку, а таких id может быть не один.

[insphoto]

ну, тогда может как вариант после замены брать новый этот элемент из дома и навешивать нативное событие на него, которое будет вызывать метод во вьюхе?

[polzovatel_vue]

insphoto, Звучит хорошо, только я не совсем понимаю как это будет выглядеть.
Есть какой-нибудь пример?

[insphoto]

polzovatel_vue, а где он рендерится? весь код надо посмотреть, чет не понятно

[polzovatel_vue]

<template>
<div v-html="nl2br(taskInfo.body)">
            </div>
</template>
<script>
    import {mapGetters, mapActions, mapMutations} from 'vuex';
export default{
name:'taskComponent'
methods:{
            ...mapActions(['showComments'])
 }
}
mounted(){
 this.showComents();
 }
}
</script>

comment.js:

import axios from 'axios';
import Cookies from "js-cookie";
//import Vue from 'vue';
export default {
    actions: {
        showComments(ctx, array){
                axios.get('/api/open_model?task_id='+array.id).then(response => {
                    ctx.commit('openModel', {data:response.data.task});
                });
        },
   mutations:{
      openModel(state, array){
             array.data.attachments.map((img) => {
           
                 array.data.body =  array.data.body.replace('<att>'+img.id+'</att>', '<img :src="https://uploads.saber3d.ru/files/'+img.filename+'">');
             });



        },
    }
 }

Как-то так

[insphoto]

polzovatel_vue, не это не правильно. Надо все таки данные без разметки грузить, или после заполнения шаблона делать как будто фреймворка нет, через addEventListener

[Константин]

хм
а как вам такая задачка:
прилетает со стороннего сервера в JSON-е строчка содержащая хештеги или еможи
и нужно этот текст разукрасить -- хештеги заменить на ссылки, а еможики -- на картинки
и всё это аккуратненько вписать в страничку
и всё на клиенте