my code is:

ShopView.vue

<template>
    <div >
        <h1>Shop</h1>
        <h2>Products</h2>
        <div  v-for="Products in products" :key="Products.id">
            <ul>
                <li>{{ Products.name }}</li>
                <li><img :src="Products.pic" /></li>
                <li>Price: ${{ Products.price }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Products from "../../data/products.json"

export default {
    name: "Shop",
    data() {
        return {
            products: Products,
        }
    }
}
</script>

<style lang="scss" scoped>
.shop {
    font: 1em sans-serif;
    font-size: large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}

.products {
    font-size: xx-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bolder;
    font-style: italic;
}

ul {
    list-style-type: none;
}
</style>

products.json

[
  "Products",
  {
    "id": "1",
    "pic": "apple.jpg",
    "name": "Apple",
    "description": "good fruit",
    "price": 9.99
  },
  {
    "id": "2",
    "pic": "banana.jpg",
    "name": "Banana",
    "description": "Healthy fruit",
    "price": 5.99
  }
]

how do I remove this "empty" product that is not actually exist in my "db"(products.json)?

here is the error below(I marked the error in black(which is shows only a "price" of a product but it's not actually exists)):

enter image description here

CodePudding user response：

Remove "Products" from products.json. After removing "Products" from products.json, it would look like

products.json

[
  {
    "id": "1",
    "pic": "apple.jpg",
    "name": "Apple",
    "description": "good fruit",
    "price": 9.99
  },
  {
    "id": "2",
    "pic": "banana.jpg",
    "name": "Banana",
    "description": "Healthy fruit",
    "price": 5.99
  }
]