Question

我将字符串传递给称为parseMsg(msg)的方法，该方法将[item：5]解析为<item :id="5"></item>，然后将解析的消息存储在数组中。当我遍历数组时，未呈现该组件。

这是聊天系统的一部分，因此并非所有解析的消息都包含[item：5]。该组件应内联。例如，用户可以输入“ Regular text blah blah [item：5] blah blah”，并且该组件应在字符串内部的正确位置呈现。

如何渲染此字符串以显示组件？

Answer 1

您需要做的是使聊天气泡成为可动态呈现的组件，您可以将<item :id="5"></item>组件放入其中，尝试一下，

<template>
  <div>
     <span :is="dynamiChatBubble">
  </div>
</template>
<script>
export default {
  computed: {
    dynamiChatBubble () {
        return {
           template : '<div>You Messeage <item :id="5"></item> bla bla</div>'
        }
    }
  },
}
</script>

确保已全局注册item组件名称。希望对您有帮助

如何在方法内部呈现由字符串生成的组件？

1 个答案: