如何在外面拿到onmounted中定义的值

Question

代码

<template>
  <div>
    <!--    <h1>购物车管理页面</h1>-->
    <!--    <table v-for="(item,index) in list.array">-->
    <!--      <tr>-->
    <!--        <td><input v-model="" type="text"></td>-->
    <!--      </tr>-->
    <!--    </table>-->
    {{ text }}
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'

const list = reactive({ array1: [], array2: [], array3: [], arrayChild: [] })
const text = ref()

onMounted(() => {
  fetch('/4-3/gouwu.json').then(x => x.json()).then(x => {
    list.array1 = x.shu
    list.array2 = x.shiwu
    list.array3 = x.qita
    console.log(list.array1)
  })
})
console.log(list.array1.length)
text.value = list.array1
</script>

<style scoped>

</style>

Answer 1

list.array1 是在异步请求中设置的，当 text computed 属性被设置为 list.array1 时，由于在 onMounted 钩子中的异步请求，list.array1 目前是一个空数组。
尝试修改：

<template>
  <div>
    {{ text }}
  </div>
</template>
 
<script setup>
import { onMounted, reactive, computed } from 'vue'

const list = reactive({ array1: [], array2: [], array3: [], arrayChild: [] })

onMounted(() => {
  fetch('/4-3/gouwu.json')
    .then(x => x.json())
    .then(x => {
      list.array1 = x.shu
      list.array2 = x.shiwu
      list.array3 = x.qita
    })
})

const text = computed(() => {
  return list.array1.length > 0 ? list.array1[0] : ''
})

</script>
 
<style scoped>
</style>

 
如果答案对您有所帮助，望采纳。