Saya baru mengenal vue, mencoba menampilkan item di dalam array dalam daftar

Komponen Vue:

    <template>
        <div>
           <ul id="array-rendering">
                <li v-for="item in items" :key="item.message">
                    {{ item.message }}
                </li>
            </ul>
        </div>
    </template>
    <script>
    export default {
      props: {
        items: {
          type: [],
          default: [
            { message: 'Foo' },
            { message: 'Bar' }
          ]
        },
      },
    }
    </script>

    <style scoped>
    h4{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    </style>

Halaman:

    <ErrorAlert v-bind:items="{result}"/>

Di sini, result adalah

[
    { message: "Foo2" },
    { message: "Bar2" }
];

Alih-alih mendapatkan nilai 'foo2' dan 'bar2' saya mendapatkan kesalahan:Expected array got object

Melihat postingan yang serupa dan mencoba mengurai JSON tetapi masih tidak mendapatkan Hasil yang diharapkan. Adakah yang bisa membantu?

0
TheDeveloper 27 Mei 2021, 19:57

2 jawaban

Jawaban Terbaik

Hanya mengikat dengan v-bind:items="result". Karena Anda membungkus nilai terikat dalam {...} Anda membuat objek literal. Hanya "result" yang akan melewati array.

2
Matt U 27 Mei 2021, 16:59

Vue memiliki prop yang dapat berupa tipe data apa pun.

Dari semua tipe data, Obyek, Array harus menjadi fungsi untuk nilai defaultnya.

export default {
  props: {
    items: {
      type: Array,
      default: () => [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    },
  },
}

Dan v-bind:items sudah dapat memiliki variabel javascript. begitu

<ErrorAlert v-bind:items="result"/>
2
scar-2018 27 Mei 2021, 17:01