Nuxt中如何将api的返回数据映射到属性的数据？

Question

我正在修改表格的一部分。在那里，我将使用 api 中的内容 id 获取数据，然后我想映射返回的数据以在 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 > 
      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 对其进行修补。

Answer 1

那个不行？

<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 > 
        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>

Nuxt中如何将api的返回数据映射到属性的数据？

How to map returned data from api to data property in Nuxt?

vue.js

nuxt.js