how to add button to change the date to next date with vuetify v-date-picker? i try to make button that would change the content to next date. the calendar
this doesn't work
`
<template>
<div>
<div class="btn-group">
<button #click="getDate(1)" class="btn">TODAY</button>
<button #click="getDate(7)" class="btn">7 DAY</button>
<button #click="getDate(14)" class="btn">14 DAY</button>
<button #click="getDate(30)" class="btn">30 DAY</button>
<button #click="getDate(45)" class="btn">45 DAY</button>
<button #click="getDate(60)" class="btn">60 DAY</button>
</div>
<div>
<input v-model="data.date">
</div>
</div>
</template>
`
`
<script>
export default {
data() {
return {
data: {
date: "",
}
}
},
methods: {
getDate: function (day) {
var timeFrom = (day) => {
var dates = [];
for (let I = 0; I < Math.abs(day); I++) {
dates.push(new Date(new Date().getTime() - ((day >= 0 ? I : (I - I - I)) * 24 * 60 * 60 * 1000)).toLocaleString());
}
return dates;
}
return console.log(timeFrom(day));
},
}
}
</script>
`
Related
I want to print the date on the input according to the number of days of the button when the buttons are clicked with vue js.
For example: Clicking the 7 Day Button
I want "30.08.2021" to be written.
<template>
<div>
<div class="btn-group">
<button #click="getDate(1)" class="btn">TODAY</button>
<button #click="getDate(7)" class="btn">7 DAY</button>
<button #click="getDate(14)" class="btn">14 DAY</button>
<button #click="getDate(30)" class="btn">30 DAY</button>
<button #click="getDate(45)" class="btn">45 DAY</button>
<button #click="getDate(60)" class="btn">60 DAY</button>
</div>
<div>
<input v-model="data.date">
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
date: "",
}
}
},
methods: {
getDate: function (day) {
var timeFrom = (day) => {
var dates = [];
for (let I = 0; I < Math.abs(day); I++) {
dates.push(new Date(new Date().getTime() - ((day >= 0 ? I : (I - I - I)) * 24 * 60 * 60 * 1000)).toLocaleString());
}
return dates;
}
return console.log(timeFrom(day));
},
}
}
</script>
Right now you are just creating an array of dates, you need to create one date and then use that value in your template.
<template>
<div>
<div class="btn-group">
<button #click="getDate(1)" class="btn">TODAY</button>
<button #click="getDate(7)" class="btn">7 DAY</button>
<button #click="getDate(14)" class="btn">14 DAY</button>
<button #click="getDate(30)" class="btn">30 DAY</button>
<button #click="getDate(45)" class="btn">45 DAY</button>
<button #click="getDate(60)" class="btn">60 DAY</button>
</div>
<div>
<input v-model="data.date" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
date: "",
},
};
},
methods: {
getDate(days) {
const now = new Date();
const tmpDate = now.setDate(now.getDate() + days);
const newDate = new Date(tmpDate);
this.data.date = newDate.toDateString()
},
},
};
</script>
I've created a function for increment and decrement so that I can change the count in the cards.count.
The function for increment count works like this
but the functions for decrement count, it doesn't work.
When I click the function for decrement, this output will appear
Error in v-on handler: "TypeError: Cannot read property 'product_id' of undefined"
I don't know why there is an error in the product_id, even though the increment function also has a product_id.
I hope you can help me figured out the problem
<template>
<div v-if="cartList && cartList.length > 0">
<div
class="item-loop container col"
v-for="(cards, index) in cartList"
:key="generateKey(cards.product_id, cards.count)"
>
<div class="items row">
<div class="image col-4">
<img class="img-fluid pt-2" :src="cards.product_img" />
</div>
<div class="content text-left col-8">
<button
v-on:click="cartList.splice(index, 1)"
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h5 class="text-left">{{ cards.product_name }}</h5>
<div class="prices" :key="cards.product_id">
<div class="value-cart form-group row">
<font-awesome-icon
:icon="['far', 'minus-square']"
size="2x"
class="minus-button"
#click="min(cards.product_id)"
/>
<input
type="number"
class="input-pm bg-light form-control p-0 text-center angka"
:value="cards.count"
/>
<font-awesome-icon
:icon="['far', 'plus-square']"
size="2x"
class="plus-button"
#click="plus(cards.product_id)"
/>
</div>
<p>Rp. {{ cards.product_price * cards.count }}</p>
</div>
</div>
</div>
</div>
<div class="cart-order">
<div class="order-total">
<div class="row">
<h4 class="col-6 font-weight-bold text-left">Total</h4>
<h5 class="col-6 font-weight-bold text-right">
Rp. {{ totalprice }}
</h5>
</div>
</div>
<p class="text-left"><strong>*Not including tax(10%)</strong></p>
<b-button
class="mt-3"
variant="primary"
#click="invoice()"
v-b-modal="'modal-checkout'"
block
>Checkout</b-button
>
<b-button class="mt-2" variant="danger" #click="resetcart" block>
Cancel </b-button
><br /><br />
</div>
</div>
</template>
export default {
components: {
Features,
Card,
},
data() {
return {
datamenu: {},
cartList: [],
invoiceid: 0,
tax: 0,
searchMenu: null,
menu: null,
formCheck: {
amount: 0,
invoice: "",
cashier: "abiwardani",
menu_name: "",
},
};
},
methods: {
plus(product_id) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});
if (result) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].product_id == product_id) {
const newFoodObject = {
...this.cartList[i],
count: this.cartList[i].count + 1,
};
console.log("plus");
this.$set(this.cartList, i, newFoodObject);
}
}
}
},
min(product_id) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});
if (result) {
for (let i = this.cartList.length; i > 0; i--) {
if (this.cartList[i].product_id == product_id && this.cartList[i].count > 0){
const newFoodObject = {
...this.cartList[i],
count: this.cartList[i].count - 1,
};
this.$set(this.cartList, i, newFoodObject);
}
}
}
},
generateKey(key1, key2) {
return `${key1}-${key2}`;
},
},
mounted() {
axios
.get(process.env.VUE_APP_URL + "product")
.then((res) => {
this.datamenu = res.data.result;
})
.catch((err) => {
console.log(err);
});
}
Option 1:
i should start with length-1 and should go up to 0
min(product_id) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});
if (result) {
for (let i = this.cartList.length-1; i >= 0; i--) {
if (this.cartList[i].product_id == product_id && this.cartList[i].count > 0){
const newFoodObject = {
...this.cartList[i],
count: this.cartList[i].count - 1,
};
this.$set(this.cartList, i, newFoodObject);
}
}
}
Option 2:
You do not need 2 methods.. just have one
updateQty(product_id,mode) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});
if (result) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].product_id == product_id) {
const newFoodObject = {
...this.cartList[i],
count: mode === 'INCRE' ? this.cartList[i].count + 1 : this.cartList[i].count - 1,
};
console.log("plus");
this.$set(this.cartList, i, newFoodObject);
}
}
}
},
use it like
<font-awesome-icon
:icon="['far', 'minus-square']"
size="2x"
class="minus-button"
#click="updateQty(cards.product_id,'INCRE')"
/>
and
<font-awesome-icon
:icon="['far', 'minus-square']"
size="2x"
class="minus-button"
#click="updateQty(cards.product_id,'DECRE')"
/>
Your problem is in the final expression of your for statement inside your min() method.
Change 'i--' with 'i++' to increase your index in each iteration. This will avoid accessing the 'cartList' array with a negative index (which is causing the problem, as it gets undefined):
min(product_id) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id
}
})
if (result) {
for (let i = this.cartList.length; i > 0; i++) {
👆
...
Here is how I did that
HTML:
<button #click="increment()">+</button>
<input :value="amount" />
<button #click="decrement()">-</button>
JS:
data() {
return {
amount: 0,
};
},
methods: {
increment() {
this.amount++;
},
decrement() {
this.amount--;
},
},
I have a button on my website that gives bonuses to the user. I need to make several conditions in 1 button.
If heal_used = 1 or diff < 1, the button must be disabled. I tried to do it like this:
<button v-if="heal_used 1" :disabled="diff < 1" v-else class="btn btn--small btn--purple" #click="takeBonus">Take</button>
But nothing worked. Also, if the button is active and the user can get a bonus, after the bonus you need to make the button inactive. I did it like this:
if (data.type === 'success') {
this.bonus_num = data.bonus_num;
this.heal_used = data.heal_used;
this.$forceUpdate();
}
Is it true? Can you help me please, to make 2 condifitions?
UPDATE
I change code to:
<button class="btn btn--small btn--purple" :disabled="isDisabled" #click="takeBonus">Take</button>
And add:
computed: {
isDisabled() {
return this.heal_used = 1 || this.diff < 10;
},
},
Console.log say me:
console.log(data.heal_used);
console.log(data.diff);
0
17
But button is stil; disabled, what's wrong?
UPDATE takeBonus:
takeBonus() {
this.$root.axios.post('/user/takeBonus', {
value: this.user.cashback
})
.then(res => {
const data = res.data;
if (data.type === 'success') {
this.bonus_num = data.bonus_num;
this.$root.user.balance = data.newBalance;
this.heal_used = data.heal_used;
this.$forceUpdate();
}
this.$root.showNotify(data.type, this.$t(`index.${data.message}`));
})
},
new Vue({
el: '#example',
data: {
heal_used : 4,
diff: 3
},
methods: {
takeBonus1: function () {
this.heal_used=1;
this.diff=0;
},
takeBonus2: function () {
this.heal_used=1;
this.diff=4;
},
takeBonus3: function () {
this.heal_used=2;
this.diff=.1;
},
reset: function () {
this.heal_used=4;
this.diff=3;
}
}
})
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
</head>
<body>
<div id="example">
<p>
<span>heal_used: {{ heal_used }}</span>
<span>diff: {{ diff }}</span>
</p>
<button
#click="takeBonus1()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (both)
</button>
<br>
<button
#click="takeBonus2()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (heal_used===1)
</button>
<br/>
<button
#click="takeBonus3()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (diff < 1)
</button>
<br>
<button
#click="reset()">
Reset
</button>
</div>
</body>
I am trying to create a dynamic v-model input. All seems well except for the following.
The on click event that triggers the checkAnswers method only works if you click out of the input then click back into the input and then press the button again. It should trigger when the button is pressed the first time.
Does anyone have any ideas? Thanks in advance.
<template>
<div class="addition container">
<article class="tile is-child box">
<div class="questions">
<ul v-for="n in 5">
<li>
<p>{{ randomNumberA[n] }} + {{ randomNumberB[n] }} = </p>
<input class="input" type="text" maxlength="8" v-model.number="userAnswer[n]">
<p>{{ outcome[n] }}</p>
</li>
</ul>
</div>
<div class="button-container">
<button #click="checkAnswers" class="button">Submit Answer</button>
</div>
</article>
</div>
</template>
<script>
export default {
data() {
return {
randomNumberA: [] = Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
randomNumberB: [] = Array.from({length: 40}, () => Math.floor(Math.random() * 10)),
userAnswer: [],
outcome: [],
}
},
methods: {
checkAnswers() {
for (var i = 0; i < 6; i++) {
if (this.userAnswer[i] === (this.randomNumberA[i] + this.randomNumberB[i])) {
this.outcome[i] = 'Correct';
} else {
this.outcome[i] = 'Incorrect';
}
}
}
}
}
</script>
You have some basic issues with your use of the template syntax here. According to the vue docs:
One restriction is that each binding can only contain one single
expression, so the following will NOT work: {{ var a = 1 }}
If you want to populate your arrays with random numbers you would be better calling a function on page mount. Something like this:
mounted() {
this.fillArrays()
},
methods: {
fillArrays() {
for (let i = 0; i < 5; i++) {
this.randomNumberA.push(Math.floor(Math.random() * 10))
this.randomNumberB.push(Math.floor(Math.random() * 10))
this.answer.push(this.randomNumberA[i] + this.randomNumberB[i])
}
}
}
Then you can use template syntax to display your arrays.
It looks like you are setting up a challenge for the user to compare answers so I think you'd be better to have a function called on input: Something like:
<input type="whatever" v-model="givenAnswer[n-1]"> <button #click="processAnswer(givenAnswer[n-1])>Submit</button>
Then have a function to compare answers.
Edit
I have basically rewritten your whole page. Basically you should be using array.push() to insert elements into an array. If you look at this you'll see the randomNumber and answer arrays are populated on page mount, the userAnswer array as it is entered and then the outcome on button click.
<template>
<div>
<div >
<ul v-for="n in 5">
<li>
<p>{{ randomNumberA[n-1] }} + {{ randomNumberB[n-1] }} = </p>
<input class="input" type="text" maxlength="8" v-model.number="userAnswer[n-1]">
<p>{{ outcome[n-1] }}</p>
</li>
</ul>
</div>
<div class="button-container">
<button #click="checkAnswers" class="button">Submit Answers</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
randomNumberA: [],
randomNumberB: [],
answer: [],
userAnswer: [],
outcome: [],
}
},
mounted() {
this.fillArrays()
},
methods: {
checkAnswers() {
this.outcome.length = 0
for (var i = 0; i < 6; i++) {
if (this.userAnswer[i] === this.answer[i]) {
this.outcome.push('Correct');
} else {
this.outcome.push('Incorrect');
}
}
},
fillArrays() {
for (let i = 0; i < 5; i++) {
this.randomNumberA.push(Math.floor(Math.random() * 10))
this.randomNumberB.push(Math.floor(Math.random() * 10))
this.answer.push(this.randomNumberA[i] + this.randomNumberB[i])
}
}
}
}
</script>
I am trying to do something pretty simple. Increment a number:
<div>
<button v-on:click="increase">Add 1</button>
<p>{{ sayHello() }} and {{ counter }}</p>
</div>
which will change an event here:
<b-form-input v-bind="renderText(counter)"
type="text"
placeholder="Type Alex"></b-form-input>
where this should just render whatever is in the text box.
<b-form-input v-bind="foo"
type="text"
placeholder="Enter your name"></b-form-input>
<p>Value: {{ foo }} and {{counter}}</p>
full code: but the only this that works in the sayHello() method.
<template>
<div>
<form>
<div>
<button v-on:click="increase">Add 1</button>
<p>{{ sayHello() }} and {{ counter }}</p>
</div>
<div>
<b-form-input v-bind="foo"
type="text"
placeholder="Enter your name"></b-form-input>
<b-form-input v-bind="renderText(counter)"
type="text" placeholder="Type Alex"></b-form-input>
<p>Value: {{ foo }} and {{counter}}</p>
</div>
</form>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'Hobbies',
methods: {
data:{
foo: '',
counter: 0
},
sayHello: function () {
return 'Alex'
},
increase: function () {
this.counter++;
},
renderText: function (event) {
if (event == 5){
return 10
} else{
return 16
}
}
}
});
</script>
<style scoped>
</style>
when putting data outside of methods I get:
You put data inside methods, it should be at the root level, since we're in a component it must also come as a function :
export default {
name: 'Hobbies',
data: function(){
return { foo: '', counter: 0 };
},
methods: {
sayHello: function () { return 'Alex' },
increase: function () { this.counter++; },
renderText: function (event) {
if (event == 5){
return 10
} else{
return 16
}
}
}
}