Jika nilai yang sama dicetak di konsol sebelum memanggil axios, mengapa nilai yang berbeda dikirim ke server?

Saya memiliki bidang formulir yang memiliki pelengkapan otomatis umum berikut:

      <generic-autocomplete
        v-model='c.heuristicId'
        v-on:change='heuristicSelected(i, $event)'
        label='Fuente de datos'
        :apiFunction='heuristicsFetchFunction'
        :disabled='disabled'/>

Saat menyimpan formulir dan mengirimkannya dengan bidang kosong ini heuristicIddikirim sebagai nullyang diinginkan.

Namun, saat memilih nilai dari pelengkapan otomatis generik dan kemudian menghapusnya, heuristicIddikirim dengan id dari nilai yang dipilih sebelumnya.

Di dalam fungsi yang memanggil aksio, saya mencatat console.log("heuristicId to be sent: " + campaign.heuristicId);dan undefinedmendapatkan login di kedua skenario.

EDIT: Setelah menanyakan lebih banyak, saya yakin kesalahannya mungkin ada di salah satu properti yang dihitung <generic-autocomplete/>:

  isValid: function () {
    // this checks that the name in display equals the object selected in
    // memory so no invalid labels are displayed while a valid object is 'selected'
    let vc = this
    let result = false
    if (vc.object) {
      result = vc.objectName === vc.object.name
      console.log('generic-autocomplete#isValid', result)
    }
    return result
  } 

vc.object yang kosong akan mengembalikan falseresult dan saya belum bisa mengatasinya dengan memuaskan.


person Esteban Vargas    schedule 04.04.2018    source sumber
comment
Bisakah Anda mengunggah kode Anda di suatu tempat? Dan Anda juga dapat menghapus kode yang tidak relevan dari pertanyaan Anda sehingga orang dapat mengetahui bagian yang salah dengan lebih baik.   -  person Asqan    schedule 05.04.2018
comment
@Asqan silakan periksa hasil edit baru. Terima kasih   -  person Esteban Vargas    schedule 05.04.2018


Jawaban (1)


Setelah mencatat aliran kontrol yang sangat rumit, saya akhirnya sampai pada titik di mana saya tahu properti mana yang harus saya mutasi. Namun, ternyata di Vue 2 mutasi properti inline merupakan anti-pola. Kemampuan mutasi props inline sudah tidak digunakan lagi pada versi Vue sebelumnya agar konsisten dengan paradigma perpustakaan yang sepenuhnya reaktif. Jadi yang terjadi adalah jika Anda mencoba mengubah properti inline, saat komponen dirender ulang, properti tersebut akan disetel kembali ke nilai defaultnya (atau sebelumnya).

Hal ini diselesaikan dengan menambahkan properti terhitung yang merupakan salinan dari properti yang ingin Anda mutasi.

//Somewhere else in the code the property is defined
property: null

//Add the computed property
data: function () {
    return {
      mutableProperty: this.property,
    }
}
person Esteban Vargas    schedule 16.04.2018