API komposisi Vue 3 mendapatkan nilai dari objek ref

Question

Saya memiliki ref:

const editItem = ref<object | null>(null)

Berikut adalah contoh nilai untuk itu:

{
   id: 1,
   title: 'Harry Potter',
   author: 'J.K. Rowling',
   created: '30-08-2000',
}

Jika saya lari console.log(editItem.value), saya melihat objek ini:

Tetapi ketika saya mencoba membaca nilainya authordengan console.log(editItem.value.author), maka saya melihat kesalahan ini:

Object is possibly 'null'.

Answer 1

Karena jenis ref adalah object | null, bisa jadi nullketika Anda mengaksesnya, yang mengarah ke pengecualian runtime. Pesan kesalahan memperingatkan tentang kemungkinan itu editItem.value.

Anda bisa menambahkan null-cek di sekitar aksesnya:

if (editItem.value) {
  console.log(editItem.value.author)
}

... atau Anda dapat menggunakan rangkaian opsional :

console.log(editItem.value?.author)

Tetapi Anda akan melihat bahwa Anda akan mendapatkan peringatan berbeda tentang authortidak menjadi bagian dari tanda tangan untuk object. Salah satu solusinya adalah mengubah reftipe dari objectke antarmuka tertentu:

interface MyRef {
  id: number;
  title: string;
  author: string;
  created: string;
}

const editItem = ref<MyRef | null>(null)

console.log(editItem.value?.author) ✅

Answer 2

Cześć Michal

Masalahnya (tanpa melihat kode) tampaknya Anda menggunakan ref untuk nilai objek. Meskipun Anda mungkin menemukan beberapa solusi untuk mendapatkannya bekerja, cara paling sederhana untuk menangani benda-benda reaktif adalah dengan menggunakan reactivebukan ref.

Satu keuntungan tambahan adalah Anda tidak perlu menggunakan .valuesaat Anda mendapatkan atau menyetel nilai objek.