<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App3 sample</title>
<link rel="stylesheet" href="styles/style.min.css">
<link rel="icon" href="../public/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="../public/favicon.ico" type="image/ico">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<header class="top-bar spread">
<nav class="top-bar-nav">
<a href="#" class="top-bar-link">
<i class="icofont-spoon-and-fork"></i>
<span>Home</span>
</a>
<a href="views/products.html" class="top-bar-link">
<span>Products</span>
</a>
<a href="views/past-orders.html" class="top-bar-link">
<span>Past Orders</span>
</a>
</nav>
<a @click="toggleSidebar" href="#" class="top-bar-cart-link"> <!-- 调用开关函数 -->
<i class="icofont-cart-alt icofont-1x"></i>
<span>Cart (0)</span>
</a>
</header>
<div class="splash-container">
<div class="splash">
<h1>Splendid Food</h1>
</div>
</div>
<main class="wrapper">
<h2>Recommended</h2>
<div class="recommended">
<div v-for="(product, i) in inventory.slice(0,3)" :key="product.id" class="card"> <!-- 启用本地json数据库内容，并只输出前3个项目 -->
<div class="card-title"> <!-- 这里的‘i’指的就是，加入购物车的数量 -->
{{ product.name }} <!-- 启用本地json数据库的项目名称。在这里product只是一个中间变量，你可以改用x,y,z之类的都可以 -->
</div>
<div class="card-body">
<i class="icofont-10x icofont-{{ product.icon }}"></i> <!-- 启用本地json数据库的项目图标 -->
<form>
<div class="row">
<div class="cell">
<label>Type:</label>
</div>
<div class="cell">
<em>{{ product.type }}</em> <!-- 启用本地json数据库的项目类型 -->
</div>
</div>
<div class="row">
<div class="cell">
<label>Price:</label>
</div>
<div class="cell">
{{ product.price.USD }} <!-- 启用本地json数据库的项目价格，用USD货币，即美元 -->
</div>
</div>
<div class="row">
<div class="cell">
<label>Quantity:</label>
</div>
<div class="cell">
<input type="number" v-model.number="product.quantity"> <!-- 放置库存萝卜变量 -->
</div>
</div>
</form>
</div>
<div class="card-footer">
<button @click="addToCart(product.name, i)" class="btn btn-light"> <!-- 关联萝卜函数,加入购物车 -->
Add to cart
</button>
</div>
</div>
</div>
</main>
<sidebar
v-if="showSidebar"
v-bind:templatetoggle="toggleSidebar"
:templatecart="cart"
:Inventory="inventory"
/> <!-- 调用内嵌边框栏，启用中间变量。玩了半天templateToggle，一直关闭不了边框栏；改用templatetoggle后，却一下子就行了 -->
<!-- ’v-bind:‘，内联或创建Vue变量 -->
<footer>
</footer>
</div>
<script>
let App = Vue.createApp({
data(){
return{
showSidebar: false,
inventory:[], //设置空数组
cart:{} //设置空购物车
}
},
methods:{
addToCart(name,index){
if (!this.cart[name]) this.cart[name] = 0 //给项目数量设置初始值为零。如果项目的数值是假，就给其赋值为0
this.cart[name] += this.inventory[index].quantity //更新水果数值
console.log(this.cart) //记录数值
},
toggleSidebar(){ //创建开关函数
this.showSidebar =! this.showSidebar
}
},
async mounted(){ //’async‘异步调用
const res = await fetch('./food.json') //调用json文件，并设变量为res
const data1 = await res.json()
this.inventory = data1 //使库存启用json数据
}
})
App.component('sidebar',{ //构建内嵌边框栏
props:['templatetoggle','templatecart','Inventory','removeItem'], //生成中间变量，即开关和购物车
computed:{
cartTotal() {
return (this.templatecart.carrots * 4.82).toFixed(2) //购物车物品总价保留2位小数点
}
},
methods:{ //找到项目价钱，美元结算
getPrice(name){
const product = this.inventory.find((p) => {
return p.name === name
})
return product.price.USD
},
calculateTotal(){ //计算总商品价格
const names = Object.keys(this.cart)
const total = Object.entries(this.cart).reduce((acc, curr, index) =>{
return acc + (curr[1] * this.getPrice(curr[0]))
},0)
return total.toFixed(2)
}
},
template: `
<aside class="cart-container">
<div class="cart">
<h1 class="cart-title spread">
<span>
Cart
<i class="icofont-cart-alt icofont-1x"></i>
</span>
<button @click="templatetoggle" class="cart-close">×</button> <!-- 点击叉号，可关闭边框栏 -->
</h1>
<div class="cart-body">
<table class="cart-table">
<thead>
<tr>
<th><span class="sr-only">Product Image</span></th>
<th>Product</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
<th><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody>
<tr v-for="(quantity,key,c) in templatecart" :key="c">
<td><i class="icofont-carrot icofont-3x"></i></td>
<td>{{ key }}</td> <!-- 在边框栏加入的蔬果的名称 -->
<td>\${{ getPrice(key) }}</td> <!-- 在边框栏加入的蔬果的价格 -->
<td class="center">{{ quantity }}</td> <!-- 在边框栏加入的萝卜数量 -->
<td>\${{ getPrice(key) * quantity }}</td> <!-- 在边框栏计算购物车总价钱 -->
<td class="center">
<button @click="removeItem(key)" class="btn btn-light cart-remove">
×
</button>
</td>
</tr>
</tbody>
</table>
<p v-if="!Object.keys(templatecart).length" class="center"><em>No items in cart</em></p> <!-- 当购物车没有项目时，隐藏此提醒 -->
<div class="spread">
<span><strong>Total:</strong> \${{ calculateTotal }}</span> <!-- 启用函数，在边框栏计算购物车总价 -->
<button class="btn btn-light">Checkout</button>
</div>
</div>
</div>
</aside>
`
})
App.mount('#app')
</script>
<!-- 同步改变边框栏商品数量和商品总价格 -->
</body>
</html>
为什么它说我用的这个findIndex函数未被定义呢？我之前是用find()函数，它也是说函数未被定义。哪位做前端的好人能帮我看看呀？折腾了一个下午，还是没能找到问题所在。
难道是vue.js不支持Javascript的内置函数吗？
自学2个月前端的应届生
