序文:
vue3.0では、セットアップで変数を定義し、returnで送信できます。ページは{ {}}で直接取得されますが、データを取得するためにバックグラウンドを要求した後、初期化によって定義されたフィールドを変更する必要があります。この場合はどうすればよいでしょうか
目次
1.ソースコードを共有し、
テンプレート:
<ul>
<li>我是从后台拿到的值:</li>
<li>城市:{
{pageData.list.cityName}}</li>
<li>学校:{
{pageData.list.schoolName}}</li>
<li>姓名:{
{pageData.list.teacherName}}</li>
</ul>
js:
setup (props, ctx) {
//页面上的数据
let pageData = reactive({
list:{}
})
//请求后台
let params = {
}
proxy.$api.user.getUerInfo(params).then(res=> {
let code = trimNumber(res.data.code)
if (code === 200) {
let datas = res.data.data
pageData.list = datas
}
})
return {
//数据
pageData
}
2.オンラインで関連情報を探す
2つの方法があります。1つはrefメソッドで、もう1つはリアクティブメソッドです。これら2つのことは、私が個人的に奇妙に感じます。1つは、オブジェクトに置き換えられ、複数のレイヤーがある場合、彼の.valueメソッドはあまり良くないということです。フレンドリーで、最初のrefメソッドは、データリンケージに使用すると、不適切と感じます
setup() {
const aLoading = ref<boolean>(false)
let apps = reactive<Array<any>>([])
const getAllApp = () => {
aLoading.value = true
queryAll()
.then((response: any) => {
if (response.content.length > 0) {
apps = response.content
}
console.log(apps) // Array(2) // 值是拿到了的
}).catch(error => {
console.debug(error)
}).finally(() => {
aLoading.value = false
})
}
onMounted(() => {
getAllApp()
})
return {
aLoading,
apps,
}
},