vue3+ts 列表视图不更新

寅春树
  • 698

image.png

<template>
  <div class="app-container filter-container">
    <el-input style="width: 200px" clearable class="filter-item" placeholder="输入用户ID" v-model="modeData.userId" label="用户ID"></el-input>
    <el-input style="width: 200px" clearable class="filter-item" placeholder="输入标题" v-model="modeData.title" label="标题"></el-input>
    <el-button @click="so" class="filter-item">搜索</el-button>
    <br/><br/>
    {{list}}
    <el-table :data="list" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="introduce" label="内容"></el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
  import {getGoodsList} from "../request/api"
  import {onMounted, reactive,toRaw} from "vue";
  type modelType={
    title:string,
    userId?:number|null,
    id?:number,
    introduce:string
  }
  const so=()=>{
    getList()
  }
  const getList=()=>{
    getGoodsList().then((res)=>{
      list=toRaw(res.data)
      console.log("list")
      console.log(list)
    })
  }
  let list:Array<modelType>=[]
  const modeData=reactive<modelType>({
    introduce: "",
    title: "",
    userId:null
  })
  onMounted(()=>{
    getList()
  })

</script>

<style scoped lang="less">

</style>

调接口拿到了数据,可视图不更新。。。

回复
阅读 536
1 个回答

let list=reactive({list:[]})

reactive({})里需要再套一个对象。

宣传栏