1
I am using Vue.js in a project and would like your help. I’ll try to exemplify what I’m doing.
I have 2 buttons, + and - when the user clicks on or the other I want to update my input with the values (increment or decrease).
The point is that I am not able to update my automatic input, I will be putting down my complete code.
<section class="offer-dedicated-nav bg-white border-top-0 shadow-sm">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-order-online-tab" data-toggle="pill" href="#pills-order-online" role="tab" aria-controls="pills-order-online" aria-selected="true">Cardápio Digital</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-gallery-tab" data-toggle="pill" href="#pills-gallery" role="tab" aria-controls="pills-gallery" aria-selected="false">Galeria de Fotos</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-restaurant-info-tab" data-toggle="pill" href="#pills-restaurant-info" role="tab" aria-controls="pills-restaurant-info" aria-selected="false">Informações</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-reviews-tab" data-toggle="pill" href="#pills-reviews" role="tab" aria-controls="pills-reviews" aria-selected="false">Comentários</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="offer-dedicated-body pt-2 pb-2 mt-4 mb-4">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="offer-dedicated-body-left">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active cardapio" id="pills-order-online" role="tabpanel" aria-labelledby="pills-order-online-tab">
{% verbatim %}
<div id="#menu" class="bg-white rounded shadow-sm p-4 mb-4 explore-outlets">
<h5 class="mb-4">{{ title }}</h5>
<div class="explore-outlets-search mb-4">
<div class="input-group">
<input type="text"
placeholder="Com o que você quer refrescar hoje?"
v-on:input="updateFilter"
class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-link">
<i class="icofont-search"></i>
</button>
</div>
</div>
</div>
<h6 class="mb-3"></h6>
<div class="row">
<div class="col-md-4 col-sm-6 mb-4"
v-for="(product, index) in products"
v-if="!search || product.name_lower.indexOf(search) !== -1">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="list-card-image">
<div class="star position-absolute">
<span class="badge badge-success">
<i class="icofont-star"></i> THE BEST</span>
</div>
<div class="favourite-heart text-danger position-absolute">
<a href="#"><i class="icofont-heart"></i></a>
</div>
<div class="member-plan position-absolute">
<span class="badge badge-dark">+ VENDIDO</span>
</div>
<a href="javascript:;" v-if="product.images.length">
<img v-bind:src="product.images[0]" class="img-fluid item-img">
</a>
</div>
<div class="p-3 position-relative">
<div class="list-card-body">
<h6 class="mb-1"><a href="#" class="text-black">{{ product.name }}</a></h6>
<p class="text-gray time mb-0"><a class="btn btn-link btn-sm pl-0 text-black pr-0" href="#">R$ {{ product.price|money }} </a>
<span class="float-right">
<a class="btn btn-outline-secondary btn-sm" @click="addItemSelected(index)" href="javascript:;">ADD</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" v-if="productPrepareOrder">
<h5 class="mb-4 mt-3 col-md-12">0<small class="h6 text-black-50"> Adicionais Selecionados</small></h5>
<div class="col-md-12">
<div class="bg-white rounded border shadow-sm mb-4">
<div class="gold-members p-3 border-bottom">
<a class="btn btn-outline-secondary btn-sm float-right" href="#">ADICIONAR NO CARRINHO</a>
<div class="media">
<div class="mr-3"><i class="icofont-ui-press text-warning food-item"></i></div>
<div class="media-body">
<h6 class="mb-1">{{ productPrepareOrder.name }}</h6>
<p class="text-gray mb-0">R$ {{ productPrepareOrder.price|money }} </p>
</div>
</div>
</div>
<div class="gold-members p-3 border-bottom" v-for="(additional, index) in productPrepareOrder.additionals">
<span class="count-number float-right">
<button class="btn btn-outline-secondary btn-sm left dec">
<i class="icofont-minus"></i>
</button>
<input v-bind:id="'additional-'+additional.id" v-model="productPreAddOrder.additionals[(additional.id)].amount" class="count-number-input" type="text" readonly="true">
<button class="btn btn-outline-secondary btn-sm right inc" @click="addAdditionalItem(additional.id)">
<i class="icofont-plus"></i>
</button>
</span>
<div class="media">
<div class="mr-3"><i class="icofont-ui-press text-danger food-item"></i></div>
<div class="media-body">
<h6 class="mb-1">{{ additional.name }}
<!-- <span class="badge badge-success">Mais utilizado</span> -->
</h6>
<p class="text-gray mb-0">R$ {{ additional.price|money }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endverbatim %}
</div>
<!-- /cardapio -->
</div>
</div>
</div>
</div>
</div>
</section>
{% put scripts %}
<script type="text/javascript">
Vue.filter('money', function (value) {
let val = (value/1).toFixed(2).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
});
Vue.filter('existsProperty', function (value) {
console.log(value);
});
var menu = new Vue({
el: '.cardapio',
data () {
return {
search: '',
title: 'Cardápio digital',
products: null,
productPrepareOrder: null,
productPreAddOrder: {},
}
},
methods: {
loadListProducts: function(){
var self = this;
$.request("onListProducts", {
success: function(data) {
self.products = data.products;
},
});
},
updateFilter: function(event){
this.search = event.target.value.toLowerCase();
},
addItemSelected: function(index){
var self = this;
self.productPrepareOrder = self.products[index];
self.productPreAddOrder = {
id: self.productPrepareOrder.id,
name: self.productPrepareOrder.name,
price: self.productPrepareOrder.price,
additionals: {
}
}
self.productPrepareOrder.additionals.forEach(function(obj,value){
self.productPreAddOrder.additionals[obj.id] = {
id: obj.id,
name: obj.name,
amount: 0,
price: obj.price,
price_total: 0,
};
});
console.log(self.productPreAddOrder)
},
addAdditionalItem: function(index){
var self = this;
var amount = self.productPreAddOrder.additionals[index].amount;
amount = amount + 1;
self.productPreAddOrder.additionals[index].amount = amount;
console.log(self.productPreAddOrder.additionals);
}
},
mounted () {
this.loadListProducts();
}
});
</script>
{% endput %}
The addAdditionalItem function technically updates the amount variable. However, it is not reflected in the input value.
--- EDIT -- The section that does what I mentioned above are these:
<button class="btn btn-outline-secondary btn-sm left dec">
<i class="icofont-minus"></i>
</button>
<input v-bind:id="'additional-'+additional.id" v-model="productPreAddOrder.additionals[(additional.id)].amount" class="count-number-input" type="text" readonly="true">
<button class="btn btn-outline-secondary btn-sm right inc" @click="addAdditionalItem(additional.id)">
<i class="icofont-plus"></i>
</button>
Try to put only the necessary to reproduce the error, the way it is makes it difficult to help you
– Denis Rudnei de Souza
@Denisrudneidesouza thanks for your comment. I added in the main post only the part of HTML that has the shares I mentioned in the post.
– Crazy