Как заполнить массив в Vue данными из запроса Ax ios - PullRequest
Новая
       18

Как заполнить массив в Vue данными из запроса Ax ios

0 голосов
/ 07 февраля 2020

v-breadcrumbs отображает данные из массива хлебных крошек - это прекрасно работает с данными c. 

<v-row>
    <!-- Breadcrumbs -->
    <v-col class="d-flex">
        <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
    </v-col>
</v-row>

<v-row>
    <v-col class="d-flex">
        <p class="blue--text title font-weight-medium my-0">{{response.products.title}}</p>
    </v-col>
</v-row>

Ax ios делает запрос на получение различных данных о продукте - это также отлично работает. 

<script>
export default {
  async asyncData({$axios, params}){
    try{
      let response = await $axios.$get(`/api/products/${params.id}`)
      console.log(responce);

      return{
        responce: responce
      }
    }catch(err){
      console.log(err);
    }
  },
  data: () => ({
    breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}]
  })
</script>

Затем я хотел бы использовать данные, возвращенные из запрос get для распространения последнего элемента в массиве breadcrumb.

Я пытался использовать обещание для вставки значения после завершения запроса get, но при этом все приложение вылетает с «Не удается прочитать свойство« products »из неопределенного» * ​​1010 * независимо от того, какой код выполняется в обещании. 

let response = await $axios.$get(`/api/products/${params.id}`)
                     .then((result) => {
                       // Some code here
                     })

Я понимаю, что должен каким-то образом изменять значение 'response' при использовании обещания .then (). Это лучший способ решить эту проблему или я должен изучить Vue ловушки жизненного цикла?

Вот ответ API на запрос get: 

{
  success: true,
  products: {
    rating: [],
    _id: '5e3bfd038125ebafba2ff8ce',
    owner: {
      _id: '5e397eed2da03d0817f3f870',
      name: 'Jeff Bezos',
      about: 'Jeff is the owner of this site.',
      photo: '-',
      __v: 0
    },
    category: { _id: '5e397bcc2da03d0817f3f86d', type: 'Books', __v: 0 },
    title: 'The Everything Store',
    description: 'A book about Amazon',
    photo: '-',
    price: 12,
    stockQuantity: 73,
    __v: 0
  }
}

Ответы [ 2 ]

2 голосов
/ 07 февраля 2020

Если вы хотите, чтобы переменная влияла на вашу DOM, вы должны объявить ее как свойство в функции данных Vue isntance: 

data: () => ({
  breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}],
  response: null
})

Затем, чтобы получить доступ к response свойство data, вы должны использовать хук жизненного цикла. Например: 

<script>
// import axios if needed

export default {
  data: () => ({
    breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}]
  }),
  created(){
      // I don't know where params object comes form
      $axios.$get(`/api/products/${params.id}`)
      .then(response => {
        this.response = response;
      })
      .catch(err => {
        console.log(err);
      })
  },

</script>
1 голос
/ 07 февраля 2020

В вашем скрипте определите response, тогда он будет известен вашему Vue компоненту: 

data: () => ({
  breadcrumbs: [{text: "Category", href: "index"}, {text: "", disabled: true}],
  response: {}
})

, затем, воздействуйте на него при вызове then из топора ios, это как это работает: 

$axios.$get(`/api/products/${params.id}`)
                 .then((result) => {
                   this.response = result
                 })
...