Daftar dan Belajar Sekarang!

Error $index pada vue js

foto vikoms
5 Kontribusi 1 Coto
2 bulan yang lalu
<li v-for="todo in todos">
        <span v-bind:class="{'completed' : todo.done}">{{ todo.text }}</span>
        <button v-on:click="removeTodo($index)"> Hapus </button>
        <button v-on:click="toggleC(todo)">Done</button>
      </li>
pesan error : Property or method "$index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See dan yang saya baca di dokumentasi nya kalo untuk $index udh gabisa di gunakan di versi 2.xx jadi untuk pengganti property $index apa ya?

Tag: vue javascript

✔ Forum ini sudah terjawab


Jawaban
foto jajanpasar
21 Kontribusi 9 Coto
2 bulan yang lalu
argument kedua untuk v-for
<li v-for="(todo,index) in todos">
    <span :class="{'completed' : todo.done}">
        {{ todo.text }}
    </span>
    <button @click="removeTodo(index)"> Hapus </button>
    <button @click="toggleC(todo)">Done</button>
</li>
answered icon
foto jajanpasar
21 Kontribusi 9 Coto
2 bulan yang lalu
argument kedua untuk v-for
<li v-for="(todo,index) in todos">
    <span :class="{'completed' : todo.done}">
        {{ todo.text }}
    </span>
    <button @click="removeTodo(index)"> Hapus </button>
    <button @click="toggleC(todo)">Done</button>
</li>

foto RezkyVengeance
60 Kontribusi 12 Coto
1 bulan yang lalu
kayaknya ini kamu mau ambil key index nya ya ? sya biasa kayak begini, tinggal di tambahain binding :key="index"
<li v-for="todo in todos" :key="todo.id">
        <span v-bind:class="{'completed' : todo.done}">{{ todo.text }}</span>
        <button v-on:click="removeTodo(todo.id)"> Hapus </button>
        <button v-on:click="toggleC(todo)">Done</button>
      </li>
kode diatas kalau object todonya memiliki id, kalau nggak ada bisa di ganti :key="todo.id" di ganti jadi :key="index"
<li v-for="(todo, index) in todos" :key="index">
        <span v-bind:class="{'completed' : todo.done}">{{ todo.text }}</span>
        <button v-on:click="removeTodo(index)"> Hapus </button>
        <button v-on:click="toggleC(todo)">Done</button>
      </li>


Login untuk diksusi di forum sekolah koding