Vue3 遍历显示Json数组

在Vue项目中 遍历显示Json数组 以列表的形式显示的页面上

 main.js 全局 json 对象

//全局json
const globalData=reactive({
    extTelTalkData:  [
        {
            userExten: "1000",
            userName: "刘亦菲",
            callStatus:"通话"
        },
        {
            userExten: "1001",
            userName: "娜然",
            callStatus:"通话"
        }
    ]
})
app.provide('globalData', globalData);

组件中调用显示部分

<li class="">
    <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前通话 [ {{ globalData.extTelTalkData.length }} ]</p></a>
    <div class="IndReN">
        <el-row :gutter="74"  v-for="(dataItem, index) in globalData.extTelTalkData" :key="index">
             <el-col :span="8">   
                   {{dataItem.userExten}} {{dataItem.userName}}  {{dataItem.callStatus}} 

             </el-col>
             <br>
        </el-row>      

     </div>
</li>

组件中 javascript 部分

<script>
// 在子组件中注入全局对象
import { inject, watch } from 'vue'

export default {
  // 组件名称
  name: 'RightSideComponent',
  setup() {
        // 注入全局对象
        const globalData = inject('globalData');
        //监听全局对象的变化
        watch(() => globalData.extTelTalkData, (newValue) => {
            // 更新自己的状态
            globalData.extTelTalkData=newValue;
                        
            console.log("watch "+globalData.extTelTalkData.length);    
             
        })
        return { 
            globalData 
        };
    }
}
</script>