个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我是 js 和 vue 的初学者，我正在建立一个网站来自动化我的比萨店交付订单。
我有一个 v-for 浇头列表，客户可以从列表中最多选择 4 个浇头，他可以选择 2、3 或 4 次相同的浇头。
我为列表中的每个项目创建了一个计数器，它将选定的顶部名称存储在一个限制为 4 的数组中。这有效。
如何选择和增加在界面中选择的浇头数量？
下面我有我的代码和一些视觉引用
https://codepen.io/mordzin/pen/VwePBzq
var App = new Vue({
el: '#app',
data: {
flavorCounter: 0,
cardapio: [],
order: [],
selectedItem: null
},
mounted() {
// const axios = require('axios');
axios.get('https://v2-api.sheety.co/4a5e4bb41d15a6ea344152fafca024db/zunepizza/cardapio')
.then((response) => {
this.cardapio = response.data.cardapio
})
.catch((error) => {
})
.finally(() => {
})
},
methods:{
addFlavor(){
if (this.flavorCounter <= 3) {
flavor = event.target.getAttribute('flavor')
this.order.push(flavor);
this.flavorCounter ++
console.log(this.order)
console.log(this.flavorCounter)
} else {
console.log('Maximo de sabores')
}
},
removeFlavor(){
if (this.flavorCounter >= 1) {
flavor = event.target.getAttribute('flavor')
this.order.splice(index, 1);
this.flavorCounter --
console.log(this.order)
console.log(this.flavorCounter)
} else {
}
},
}
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Zune Pizza</title>
<link rel="stylesheet" href="zunepizza.css">
<link async href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link async href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<template>
<div id="cardapio">
<ul v-for="cardapio in cardapio">
<li>
<div class="item-info">
<h3 class="item-title">{{cardapio.name}}</h3>
<div class="tag">
<h5>{{cardapio.type}}</h5>
</div>
<p class="item-title">{{cardapio.desc}}</p>
</div>
<div class="item-img">
<div class="flavorCounter" :id="cardapio.name">
<button
@click="addFlavor()"
:flavor="cardapio.name"
class="addFlavor controller-btn"> + </button>
<input :id='cardapio.name' type="number" value="0" class="flavorQuantity">
<button
@click='removecliFlavor()'
:flavor='cardapio.name'
class="addFlavor controller-btn"> - </button>
</div>
<img src="img/cardapio/baska.jpg" alt="">
</div>
</li>
</ul>
</div>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="zunepizza.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
最佳答案
你可以这样做:https://codepen.io/jasik/pen/NWxdLRg
<div id="cardapio">
<ul v-for="cardapio in cardapios">
<li>
<div class="item-info">
<h3 class="item-title">{{cardapio.name}}</h3>
<div class="tag">
<h5>{{cardapio.type}}</h5>
</div>
<p class="item-title">{{cardapio.desc}}</p>
</div>
<div class="item-img">
<div class="flavorCounter" :id="cardapio.name">
<button @click="cardapio.counter++" :disabled="cardapio.counter === 4" :flavor="cardapio.name" class="addFlavor controller-btn"> + </button>
<input :id='cardapio.name' type="number" v-model="cardapio.counter" class="flavorQuantity">
<button @click='cardapio.counter--' :disabled="cardapio.counter === 0" :flavor='cardapio.name' class="addFlavor controller-btn"> - </button>
</div>
<img src="img/cardapio/baska.jpg" alt="">
</div>
</li>
</ul>
</div>
data: {
cardapios: []
},
created() {
axios
.get(
"https://v2-api.sheety.co/4a5e4bb41d15a6ea344152fafca024db/zunepizza/cardapio"
)
.then((response) => {
let edited = response.data.cardapio;
edited.forEach((e) => {
e.counter = 0;
});
this.cardapios = edited;
})
.catch((error) => {})
.finally(() => {});
},
methods: {}
关于javascript - VUE - [food toppings counter] 当点击 "+ add"按钮时，如何增加 v-for 列表中的元素 -topping- 的值 -of toppings-，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62475290/
28
4
0
我需要从 1024 增加 FD_SETSIZE 值至 4096 .我知道最好使用 poll()/epoll()但我想了解什么是优点/缺点。主要问题是:我要重新编译glibc吗？ ?我读了几个线程，其中
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我在 HTML 文件中有这样的内容: var value = 0; add(x){ x++; do
有没有办法在用户向上滚动时增加变量，并在用户使用 JavaScript 向下滚动时减少变量？变量没有最大值或最小值，如果能够调整灵敏度就好了。我不知道从哪里开始，感谢您的帮助! 编辑:没有滚动条，因为
我是 ios 新手，遇到以下问题。 我想根据表格 View 中元素的数量增加和减少表格 View 的高度大小。如果在输入时客户端在输出时给出 3 个或超过 3 个元素，我希望看到一个比默认行大 2 行
所以我一直在四处搜索，似乎大多数人认为以下列方式递增 indexPath 是正确的方法: NSIndexPath *newIndexPath = [NSIndexPath indexPathForRo
我有一个关于 connSupervisionTimeout 的问题。 我正在使用 CoreBluetooth 编写应用程序。我检查了连接参数和 connSupervisionTimeout = 720
我正在尝试根据页面的滚动位置更改元素的填充；当用户向下滚动页面时，填充会增加，而当他们向上滚动时，填充会减少。 我的主要问题是滚动不是很流畅，有时如果我滚动到页面顶部太快，每次元素的填充大小都不一样。
我正在尝试计算 18456 个基因的相关性度量，但编译器 (Dev C) 在将宏 GENE 或 INDEX 增加到 4000 到 5000 之间的值后退出或大。例如，它适用于: # define GE
我有一个带有 position: absolute 和 CSS3 过渡的圆形元素(a 元素)。在 hover 事件中，我想增加圆的高度和宽度，但我想在所有边上添加像素，而不仅仅是在左侧或右侧。 示例如
为了改善用户体验，我计划在我网站的所有页面(A-、A、A+)上增加/减少/重置字体大小 我面临的问题是页面上不同元素使用的字体大小不统一。有些是 14px，有些是 18px，有些是 12px，有些是
本文实例讲述了Yii框架数据库查询、增加、删除操作。分享给大家供大家参考，具体如下： Yii 数据库查询 模型代码： ?
sql替换语句，用该命令可以整批替换某字段的内容，也可以批量在原字段内容上加上或去掉字符。 命令总解：update 表的名称 set 此表要替换的字段名=REPLACE(此表要替换的字段名, '原
sql不常用函数总结以及事务，增加，删除触发器 distinct 删除重复行 declare @x 申明一个变量 convert(varchar(20),t
要增加我使用的最大可用内存: export SPARK_MEM=1 g 或者我可以使用 val conf = new SparkConf() .setMaster("loca
我正在尝试将文本(自定义文本按钮)放入 AppBar 的前导属性中。但是，当文本太长时，文本会变成多行 Scaffold( appBar: AppBar( centerTi
我正在使用最新版本的 NetBeans，我需要增加输出和菜单的字体大小(不是代码部分)。我试过: netbeans_default_options=".... --fontsize 16" 但是当我将
我必须将 180000 个点绘制到一个 EPS 文件中。 使用标准 gnuplot 输出尺寸点彼此太接近，这使得它们无法区分。有没有办法增加图像的宽度和高度？ 最佳答案 是的。 set termina
我有一个带有输入字段的 twitter bootstrap 3 导航栏。我想增加输入字段的宽度。我已尝试设置 col 大小，但它不起作用。 html比较长，请引用bootply http://www.
我正在尝试增加 ggplot 标题中下划线的大小/宽度/厚度。我曾尝试使用大小、宽度和长度，但没有成功。 这是我所做的一个例子。 test <- tibble(x = 1:5, y = 1, z =
我是一名优秀的程序员,十分优秀！