我正在修改表單的一部分。在那里，我將使用idapi中的內容獲取資料，然后我想將回傳的資料映射到data.
這是我的.vue組件：
<template>
<div>
<b-field label="Activity ID" message horizontal>
<b-input
v-model="form.id"
placeholder="65587ghfd7654654"
required
disabled
/>
</b-field>
<b-field label="Activity Name" message horizontal>
<b-input
v-model="form.package_name"
placeholder="eg. Dubai Desert Safari evening with BBQ Dinner"
required
/>
</b-field>
<b-field label="Activity Slug" message horizontal>
<b-input
v-model="form.slug"
placeholder="eg. Dubai-Desert-Safari-evening-with-BBQ-Dinner"
required
/>
</b-field>
<b-field
label="Short Summary"
message="Your question. Max 500 characters"
horizontal
>
<b-input
v-model="form.summary"
type="textarea"
placeholder="short summary about activity"
maxlength="500"
required
/>
</b-field>
<div
v-for="(item, index) in form.otherinfos.highlightspoints"
:key="item"
class="ttc-grid ttc-grid-cols-4 ttc-gap-4"
>
<div class="ttc-col-span-3">
<b-field :label="`# ${index 1}`" message horizontal>
<b-input
v-model="form.otherinfos.highlightspoints[index]"
placeholder="eg. Dubai Desert Safari evening with BBQ Dinner"
required
/>
</b-field>
</div>
<div class="ttc-col-span-1">
<b-button
v-show="
index || (!index && form.otherinfos.highlightspoints.length > 1)
"
class="ttc-bg-green"
@click="remove(`highlights`, index)"
>
Remove
</b-button>
<b-button
v-show="index == form.otherinfos.highlightspoints.length - 1"
class="ttc-bg-red"
@click="add(`highlights`)"
>
Add fields
</b-button>
</div>
</div>
<b-field horizontal>
<b-field grouped>
<div class="control">
<b-button native-type="submit" type="is-primary">Submit</b-button>
</div>
<div class="control">
<b-button type="is-primary is-outlined" @click="reset">
Reset
</b-button>
</div>
</b-field>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
form: {
package_name: null,
id: '765hjgf987656754',
slug: null,
summary: null,
otherinfos: {
highlightspoints: [
'eg. add highlights',
'eg. add highlights',
'eg. add highlights',
'eg. add highlights',
],
},
price: {
currencyCode: 'EUR',
amount: '35.00',
},
},
}
},
async fetch() {
const data = await fetch(`${this.backendApi}/tours/gettourbyuniqueid`, {
// publicRuntime used here, more info > https://stackoverflow.com/a/67705541/8816585
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
uniqueid: 'e45d3b76-a3d9-4a97-9780-977db5e328c2',
}),
}).then((res) => res.json())
},
methods: {
add(tabkey) {
if (tabkey === 'highlights') {
this.form.otherinfos.highlightspoints.push('')
}
},
remove(tabkey, index) {
if (tabkey === 'highlights') {
this.form.otherinfos.highlightspoints.splice(index, 1)
}
},
},
}
</script>
這是我從 API 得到的回應：
{
"price": {
"currencyCode": "EUR",
"amount": "35.00"
},
"otherinfos": {
"highlightspoints": [
"Tackle the high red dunes of the Arabian desert and enjoy the magic of desert culture in this evening safari!",
"Enjoy activities such as camel riding, henna tattoos, and even photograph yourself in traditional dress",
"Test your skills on a sand board down the slopes and experience the thrill of a 4x4 ride on the sand dunes",
"Watch a Tanoura and belly dancing show while enjoying a barbecue dinner in the desert encampment",
"A professional English speaking Safari guide will aid you on your adventure!"
]
},
"package_name": "Dubai Desert Safari Red Dune: BBQ, Camel Ride & Sandboarding",
"slug": "Dubai-Desert-Safari-Red-Dune:-BBQ-Camel-Ride-and-Sandboarding",
"summary": "Escape Dubai and drive across the Red Arabian Desert in a 4WD vehicle. Enjoy the sunset, sandboarding, camel ride and visit the camel firm. Choose the 4-hour program or the 7-hour program with the addition of a BBQ dinner.",
"id": "616b498c6b667513d9ec54f6"
}
我想將此回應映射到資料屬性，因此可以使用這些資料填充表單，然后如果要進行任何更改，我們將通過 API 對其進行修補。
uj5u.com熱心網友回復：
那個不行？
<template>
<div>
<b-field label="Activity ID" message horizontal>
<b-input
v-model="form.id"
placeholder="65587ghfd7654654"
required
disabled
/>
</b-field>
<b-field label="Activity Name" message horizontal>
<b-input
v-model="form.package_name"
placeholder="eg. Dubai Desert Safari evening with BBQ Dinner"
required
/>
</b-field>
<b-field label="Activity Slug" message horizontal>
<b-input
v-model="form.slug"
placeholder="eg. Dubai-Desert-Safari-evening-with-BBQ-Dinner"
required
/>
</b-field>
<b-field
label="Short Summary"
message="Your question. Max 500 characters"
horizontal
>
<b-input
v-model="form.summary"
type="textarea"
placeholder="short summary about activity"
maxlength="500"
required
/>
</b-field>
<div
v-for="(item, index) in form.otherinfos.highlightspoints"
:key="item"
class="ttc-grid ttc-grid-cols-4 ttc-gap-4"
>
<div class="ttc-col-span-3">
<b-field :label="`# ${index 1}`" message horizontal>
<b-input
v-model="form.otherinfos.highlightspoints[index]"
placeholder="eg. Dubai Desert Safari evening with BBQ Dinner"
required
/>
</b-field>
</div>
<div class="ttc-col-span-1">
<b-button
v-show="
index || (!index && form.otherinfos.highlightspoints.length > 1)
"
class="ttc-bg-green"
@click="remove(`highlights`, index)"
>
Remove
</b-button>
<b-button
v-show="index == form.otherinfos.highlightspoints.length - 1"
class="ttc-bg-red"
@click="add(`highlights`)"
>
Add fields
</b-button>
</div>
</div>
<b-field horizontal>
<b-field grouped>
<div class="control">
<b-button native-type="submit" type="is-primary">Submit</b-button>
</div>
<div class="control">
<b-button type="is-primary is-outlined" @click="reset">
Reset
</b-button>
</div>
</b-field>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
form: {
package_name: null,
id: '765hjgf987656754',
slug: null,
summary: null,
otherinfos: {
highlightspoints: [
'eg. add highlights',
'eg. add highlights',
'eg. add highlights',
'eg. add highlights',
],
},
price: {
currencyCode: 'EUR',
amount: '35.00',
},
},
}
},
async fetch() {
const dataFetchedFromApi = await fetch(
`${this.backendApi}/tours/gettourbyuniqueid`,
{
// publicRuntime used here, more info > https://stackoverflow.com/a/67705541/8816585
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
uniqueid: 'e45d3b76-a3d9-4a97-9780-977db5e328c2',
}),
}
).then((res) => res.json())
this.form = dataFetchedFromApi // << update the local data here, after the HTTP call
},
methods: {
add(tabkey) {
if (tabkey === 'highlights') {
this.form.otherinfos.highlightspoints.push('')
}
},
remove(tabkey, index) {
if (tabkey === 'highlights') {
this.form.otherinfos.highlightspoints.splice(index, 1)
}
},
},
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388479.html
下一篇：vb圖表的自定義標簽