大佬们，求看看
我axios像后端发送数据，我前端也能接收到这个数据也是对的，而且也绑定了，为啥我页面不更新啊
<script setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import axios from 'axios';
const inputValue=ref('')
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const toggle = () => {
language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
const tableData=
[
{
id: '',
name: '',
img: '',
address:'',
state:'',
message:''
},
]
const getuserphoto=()=>{
return new URL('../assets/goodsone.jpg',import.meta.url).href
}
const sendrequest=()=>{
const data={
seacherdata:inputValue.value
}
axios.post("http://localhost:8080/search",data,{
headers:{'Content-Type': 'application/json'}
}).then(result=>{
tableData[0].id=result.data[0].id
tableData[0].name=result.data[0].name
tableData[0].address=result.data[0].address
tableData[0].state=result.data[0].state
tableData[0].message=result.data[0].message
}).catch(error=>{
console.log(error)
})
}
const clickbuttonticket=()=>{
sendrequest()
console.log(tableData)
console.log(inputValue.value)
console.log(tableData)
}
</script>
<template>
<div class="contain">
<div class="on">
<span>订单查找:</span>
<el-input
style="width: 240px"
placeholder="请输入:"
:prefix-icon="Search"
v-model="inputValue"
/>
<el-button type="success" class="one" @click="clickbuttonticket">商品信息查找</el-button>
<el-button type="success">收件人查找</el-button>
<el-button type="success">订单号查找</el-button>
</div>
<div>
<el-button mb-2 @click="toggle">切换语言</el-button>
<br />
</div>
<el-config-provider :locale="locale">
<el-table v-model:data="tableData"
style="width: 100%" class="table">
<el-table-column prop="id" label="订单号" />
<el-table-column prop="name" label="商品信息"/>
<el-table-column label="商品图片">
<template v-slot="scope">
<img :src="getuserphoto()" style="width: 100px; height: 100px;">
</template>
</el-table-column>
<el-table-column prop="address" label="收货地址" />
<el-table-column prop="state" label="订单状态" />
<el-table-column prop="message" label="备注" width="200px"/>
</el-table>
<el-pagination :total="100" />
</el-config-provider>
</div>
</template>
<style>
.on{
width: 700px;
height: 50px;
margin: 0 auto;
padding: 20px;
}
.one{
margin-left: 10px;
}
.table{
height: 650px;
}
.contain{
overflow: hidden;
}
</style>
评论
新建频道
5700成员