如何在HTML数组中渲染VueJS的title prop且保留数组结构

直接通过v-bind绑定数组表达式，就能保留原有的数组结构，同时动态插入title prop的内容：

<!-- 完整写法 -->
<your-element v-bind:data-groups="['category_all', title]"></your-element>

<!-- 简写形式 -->
<your-element :data-groups="['category_all', title]"></your-element>

关键说明 #

• 不要把数组转成字符串传入，直接传递JavaScript数组表达式，v-bind会自动把这个数组序列化为符合要求的属性值，确保原有排序功能依赖的数组结构不丢失。
• 确保你的组件已经正确声明了title prop，比如：

export default {
  props: ['title']
}

内容的提问来源于stack exchange，提问作者John Smith