使用innerHTML时vue html不呈现答案

【问题标题】：vue html not rendering when using innerHTML使用innerHTML时vue html不呈现
【发布时间】：2021-06-19 15:34:08
【问题描述】：

我有以下代码：

var Cat = {
    template: 
        '<span id="user-animal">' +
        '</span>' +
    ,
    methods: {
        getActivityDataForUser(){
            console.log(1);
            document.getElementById("user-animal").innerHTML = '<last-animal v-for="last-animal in last-animals" :last-animal="last-animal"></last-animal>';
        }
    }
};

对于上下文，当最后一个动物实际上在模板中时，上面的代码会按预期工作。变量 last-animals 是一个全局变量，通过迭代来显示内容。当它在模板中并且正确渲染时，它工作正常。但是，出于性能原因，我只想在单击按钮时呈现组件。我能做到这一点吗？这是浏览器呈现的屏幕截图（不使用变量进行迭代，只使用纯文本）。

注意动物和活动是一样的。

【问题讨论】：

您必须使用Vue-compile 或自定义render 来满足此需求
这是 XY 问题。你试图做的是矫枉过正。坚持模板。根据描述，这就是 v-if 的用途。

标签： javascript vue.js frontend vue-component innerhtml

【解决方案1】：

您必须使用 Vue-compile 或自定义渲染来满足此需求，这是一个示例：

let userContainer = `<span id="user-animal">[template]</span>`;

let { data: activityData } = await getActivityDataForUser();

let templateString = userContainer.replace('[template]', `<last-animal v-for="last-animal in last-animals" :last-animal="last-animal"></last-animal>`);

let Cat = {
    render(h){
        return h({
            data(){
                return {
                    activityData: activityData
                }
            },
            components: {
                LastAnimal
            },
            template: templateString
        });
    }
}

【讨论】：