Javascript 如何在单独的标记中呈现数组中的元素？

我有一个数组中的JSON对象列表，我打算在

Vue Native

中的模板标记中呈现这些元素

我当前的输出渲染元素时没有任何间距或任何预定义的CSS

我使用

v-for

循环来迭代元素，并将结果添加到包含其他子标记的视图标记中

数组看起来像这样

[
 {
  "name":"A",
  "age": 23,
  "hobbies":{
   }
 },
 {
  "name":"B",
  "age": 26,
  "hobbies":{
   }
 }
]

<template>
 <ScrollView>
  <template v-for="items in arr">
   <text>{{items.name}}</text>
  </template>
 </ScrollView>
<template>

在我的模板标记中，我使用类似这样的东西遍历这个数组

[
 {
  "name":"A",
  "age": 23,
  "hobbies":{
   }
 },
 {
  "name":"B",
  "age": 26,
  "hobbies":{
   }
 }
]

<template>
 <ScrollView>
  <template v-for="items in arr">
   <text>{{items.name}}</text>
  </template>
 </ScrollView>
<template>

{{items.name}

使用数组映射：

<>
  {arrays.map(item=> <div>{item.title}</div>)}
</>

{arrays.map（item=>{item.title}）}

请发布一个JSON和Vue代码的示例。@HamzaAbdaoui我用一个示例更新了问题。使用此示例，我遇到了一个组件异常错误：文本字符串必须在组件中呈现。你能显示完整代码吗？嘿！只需在内部标记外部运行v-for，就可以解决这个问题。谢谢你的帮助！