(vuejs) 数组未定义 axios 和类星体

Question

我有一个未定义的数组问题，而在 Vuejs devTool 中我看到它已满。 这是我对类星体所做的：当我点击我的更新按钮时，我想显示一张带有我行输入的 q-card。 所以我已经向 axios 发出请求并将响应放入数组中。 但是当我对我的数组执行 console.log() 时，我有“未定义”。

<template>
    <div>
        <div class="q-pa-sm q-gutter-sm">
            <q-dialog v-model="show_dialog" v-bind:programmeEdit="programmeEdit">
            <q-card>
              <q-card-section>
                <div class="text-h6">Add new item!</div>
              </q-card-section>
     
              <q-card-section>
                <div class="row">
                  <q-input  v-model="programmeEdit.prg_libelle" label="prg_libelle"></q-input>
                  <q-input  label="id"></q-input>
                   <q-input  label="nom promotteur"></q-input>

                  <q-input  label="date commercialistion"></q-input>
                  <q-input  label="stock initial"></q-input>
                  <q-input  label="nombre tranche"></q-input>
     
     
                </div>
              </q-card-section>
               
              <q-card-actions align="right">
                <q-btn flat label="OK" color="primary" v-close-popup @click="" ></q-btn>
              </q-card-actions>
              </q-card>
        </q-dialog>
              </div>
         
        <q-table title="Programme" :filter="filter" :data="programme.data" :columns="columns" row-key="name">
            <template v-slot:top-right>
                <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
              </template>
            
                  <template v-slot:body="props">
              <q-tr :props="props">
              
          <q-td key="prg_libelle" :props="props">{{ props.row.prg_libelle }}</q-td>
          <q-td key="id" :props="props">{{ props.row.id }}</q-td>
          <q-td key="nom_promotteur" :props="props">{{ props.row.act_libelle }}</q-td>
          <q-td key="id_promotteur" :props="props">{{ props.row.id_promotteur }}</q-td>
          <q-td key="date_commercialisation" :props="props">{{ props.row.tra_date_commercialisation }}</q-td>
          <q-td key="stock_initial" :props="props">{{ props.row.tra_stock_initial }}</q-td>
     
          <q-td key="nombre_tranche" :props="props">{{ props.row.nombre_tranche }}</q-td>
        <q-td key="actions" :props="props">
                  <q-btn color="blue" label="Update" @click="getProgramme(props.row.id)" size=sm no-caps></q-btn>
                  <q-btn color="red" label="Delete"  @click="deleteItem(props.row)" size=sm no-caps></q-btn>
                </q-td>
              </q-tr>
            </template>
     
        </q-table>
     
          </div>
    </template> 

Vue.use(VueAxios, axios)
export default {
   
  methods: {
  },
  data () {
    return {
      programmetoEdit:'',
      show_dialog:false,
      filter: '',
      programme:{},
      programmeEdit:{},
      columns: [
        {
          name: 'prg_libelle',required: true, label: 'prg_libelle',align: 'left', field: 'prg_libelle' ,format: val => `${val}`, sortable: true },
        { name: 'id', align: 'center', label: 'id', field: 'id',  sortable: true },
        { name: 'nom_promotteur', align: 'center',label: 'nom_promotteur', field: 'act_libelle', },
        { name: 'id_promotteur', align: 'center',label: 'id_promotteur', field: 'id_promotteur', },
        { name: 'date_commercialisation', align: 'center',label: 'date_commercialisation', field: 'tra_date_commercialisation', },
        { name: 'stock_initial', align: 'center',label: 'stock_initial', field: 'tra_stock_initial', },
        { name: 'nombre_tranche', align: 'center',label: 'nombre_tranche', field: 'nombre_tranche', },
        { name: "actions", label: "Actions", field: "actions"},
      ]
    }
  },
 
    created() {
      axios.get("http://localhost:80/api/programme")
      .then(response =>this.programme=response)
      .catch(error=>console.log(error))
    },
  methods: {
    getProgramme($id){
    axios.get("http://localhost:80/api/programme/"+$id)
    .then(response => this.programmeEdit=response.data);
    this.show_dialog= !this.show_dialog;
    this.programmeEdit.id=this.programmetoEdit;
     
  }
  },
   
}

当我想根据 id 检索查询时，我得到了一个未定义的。 我在阻止，我不知道为什么。 多谢：）

Answer 1

如果你想从你的代码中记录它（比如在.then promise 中），你应该这样做：

console.log(this.programmetoEdit);

此外，您正在与 Axios 正在做的工作同时进行分配。 不是之后，正如我猜你期望的那样。

如果您希望它发生在this.programmeEdit=response.data部分之后，您应该将所有内容放在.then promise 中。

像这样（这将在加载数据/等待API响应时显示对话框）：

    getProgramme ($id) {
    axios.get("http://localhost:80/api/programme/" + $id)
      .then(response => {
        this.programmeEdit=response.data;
        this.programmeEdit.id=this.programmetoEdit;
      });
      this.show_dialog= !this.show_dialog;
    }

或者像这样（这将在加载数据/等待 API 响应后显示对话框）：

    getProgramme ($id) {
    axios.get("http://localhost:80/api/programme/" + $id)
      .then(response => {
        this.programmeEdit=response.data;
        this.programmeEdit.id=this.programmetoEdit;
        this.show_dialog= !this.show_dialog;
      });
    }