waktu tersisa untuk klaim DISKON 40% dalam program Full Stack Membership. Klaim Promo!

[Vue warn]: Property or method "item" is not defined on the instance but referenced during vue.js:634 render.

Ditanyakan pada tanggal 25 March 2020 oleh Nico Dwi Kuswanto Edit  Hapus  Buka Kembali  Tandai 

source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link 
    rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>

<div class="container" v-for="item in products">
    <div class="row" id="app">
        <img class="img-fluid" v-bind:src="item.image" :alt="item.name">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <p>Rp.{{ item.price }}</p>
    </div>    
</div>    

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>

console:

3 JAWABAN / 0 KOMENTAR

User avatar
Hakim Sembiring menjawab pada tanggal 26 March 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

boleh sertakan source code file app.js nya kak?

User avatar
Hakim Sembiring menjawab pada tanggal 26 March 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

Oia kak,. id "app" nya jangan di dalam situ. buat jd pembungkus element yg bakal pake vue.

di sana kamu pake v-for. sedangkan instance app id nya ada di dalamnya. harusnya ada di luar jd pembungkus

User avatar
Bagus Aji Santoso menjawab pada tanggal 26 March 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 
<div class="container" id="app">
    <div class="row" v-for="item in products">
        <img class="img-fluid" v-bind:src="item.image" :alt="item.name">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <p>Rp.{{ item.price }}</p>
    </div>    
</div>    

Coba ganti kode containernya jadi seperti ini.