Develop Reference

How to wait for request and user input?

Let's say when a component loads I make an async request. That component also has a submit button that the user can press which triggers a function that relies on the result of that original request. How do I delay executing the triggered function until the async request is finished?
If that doesn't make sense let me give an example. MyComponent makes an async request getRandomColor() on mounted. MyComponent's template has <button #click="handleClick">. handleClick calls some function saveColor(). How do I make sure that saveColor() is not called until my async getRandomColor() is finished?
I'm currently using Vue.js but I think this question applies to all of javascript.

You can achieve this by adding :disabled attribute in your button element. The value of :disabled will be based on the response. i.e. If response will be there then enabled it otherwise disabled.
Working Demo :
const app = Vue.createApp({
el: '#app',
data() {
return {
buttonText: 'Call Me!',
apiResponse: [],
isDisabled: false
}
},
methods: {
saveColor() {
console.log('saveColor method call');
}
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
this.apiResponse = response.data; // Here we are getting proper response. hence, button is getting enabled.
}).catch((error) => {
console.warn('API error');
});
}
})
app.mount('#app')
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<button v-on:click="saveColor()" :disabled="!apiResponse.length">{{ buttonText }}</button>
</div>
Adding below snippet as per the comment added by the author of the post.
What if I didn't want to use the disabled button? Is there a way to make the button handler wait for the request to finish before it continues execution?
const app = Vue.createApp({
el: '#app',
data() {
return {
buttonText: 'Call Me!',
apiResponse: [],
isDisabled: false
}
},
methods: {
saveColor() {
console.log('saveColor method call');
}
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
this.apiResponse = response.data; // Here we are getting proper response. hence, button is getting enabled.
}).catch((error) => {
console.warn('API error');
});
}
})
app.mount('#app')
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<button v-on:click.prevent="apiResponse.length ? saveColor() : {}">{{ buttonText }}</button>
</div>

Awaiting till user finishes writing to input field in Vue.js

I have a QR code creating page. I want my QR codes to be created dynamically by user input. But I don't want to instantly create a QR code. I want to wait my user to finish writing then after one second i will generate the QR code. So I have a template like below:
<div class="app">
<qrcode-vue :value="genaratedQrCode"></qrcode-vue>
<input type="text" v-model="qrCodeInput" />
</div>
And my script:
import QrcodeVue from 'qrcode.vue';
export default {
data() {
return {
genaratedQrCode: '',
qrCodeInput: '',
isInputFunctionRunning: false
}
},
watch: {
async qrCodeInput() {
if (this.isInputFunctionRunning) {
return;
}
this.isInputFunctionRunning = true;
await new Promise(r => setTimeout(r, 1000));
this.genaratedQrCode = this.qrCodeInput;
this.isInputFunctionRunning = false;
}
}
components: {
QrcodeVue,
},
}
Apparently the code is not working. It generated the QR code every one seconds. What I want is waiting till user finished, then updating after 1 seconds.

You have to use .lazy modifier :
<input type="text" v-model.lazy="qrCodeInput" />
If you want to wait some delay try this :
import QrcodeVue from 'qrcode.vue';
function debounce (fn, delay) {
var timeoutID = null
return function () {
clearTimeout(timeoutID)
var args = arguments
var that = this
timeoutID = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
export default {
data() {
return {
genaratedQrCode: '',
qrCodeInput: '',
isInputFunctionRunning: false
}
},
watch: {
qrCodeInput:debounce(function() {
if (this.isInputFunctionRunning) {
return;
}
this.isInputFunctionRunning = true;
this.genaratedQrCode = this.qrCodeInput;
this.isInputFunctionRunning = false;
},1000)
}
components: {
QrcodeVue,
},
}
This is based on this answer;

Update math equation using MathLive and Vue

I have been struggling to use Vue and MathLive to handle typesetting randomly generated numbers and their squares. The function of the program is to generate a random integer from 1 to 35, calculate the square, and typeset it with MathLive. There are two buttons that add one to the integer or create another random one. I have no problem typesetting the initial value but when I create a different integer or add 1 the page, it never re-typesets. I am trying to implement this program as a component in Vue. Here is my MWE (component only):
<template lang="html">
<div class="problem">
<p id="math">$${{num}}^2 = {{square()}}$$</p>
<button #click="addOne">Add One</button>
<button #click="randomInt">Random Number</button>
</div>
</template>
<script>
import math from 'mathjs'
import MathLive from 'mathlive'
export default {
name: 'Problem',
data: function () {
return {
num: math.randomInt(1,35)
}
},
watch: {
num: function () {
console.log("Data changed");
// this.renderMath();
}
},
created: function () {
console.log("Hello This is created!");
this.renderMath();
},
beforeMount: function () {
console.log("This is beforeMount");
},
mounted: function () {
console.log("This is mounted!");
},
beforeUpdate: function () {
console.log("This is beforeUpdate");
this.renderMath();
},
methods: {
addOne: function() {
this.num++
},
randomInt: function () {
this.num = math.randomInt(1,35)
},
square: function () {
return this.num**2
},
renderMath: function (event) {
this.$nextTick(function(){
MathLive.renderMathInElement("math");
})
}
}
}
</script>
<style lang="css" scoped>
#import url("../../node_modules/mathlive/dist/mathlive.core.css");
#import url("../../node_modules/mathlive/dist/mathlive.css");
p {
color: white;
}
</style>
Edit: To clarify when I load the page up, the initial value is typeset correctly using MathLive as shown below:
Then after I click either the Add One or Random Number button, the program should generate a new value, calculate its square, and update that value on the screen as shown below:

It seems MathLive's DOM manipulation conflicts with Vue's virtual DOM, preventing Vue from patching the DOM with the updated text node.
A workaround is to apply a key to force the MathLive p element to be re-created when the key changes. We could use num as the key, since it changes with each button press:
<p :key="num">...</p>
The current watcher on num would need to be updated to call renderMath() to refresh the MathLive element:
watch: {
num() {
this.renderMath();
}
},
You should also consider making square() a computed property for more efficient rendering:
// script
computed: {
square() {
return this.num ** 2
}
}
// template
<p :key="num">$${{num}}^2 = {{square}}$$</p>

You need to use vue.js computed properties
new Vue({
name: 'Problem',
data: function () {
return {
num: math.randomInt(1,35)
}
},
watch: {
num: function () {
console.log("Data changed");
this.renderMath();
}
},
computed: {
square: function () {
return this.num**2;
}
},
created: function () {
console.log("Hello This is created!");
this.renderMath();
},
beforeMount: function () {
console.log("This is beforeMount");
},
mounted: function () {
console.log("This is mounted!");
},
beforeUpdate: function () {
console.log("This is beforeUpdate");
//this.renderMath();
},
methods: {
addOne: function() {
this.num++
},
randomInt: function () {
this.num = math.randomInt(1,35)
},
renderMath: function (event) {
this.$nextTick(function(){
MathLive.renderMathInElement("math");
})
}
}
}).$mount("#app")
<script src="https://unpkg.com/mathjs/dist/math.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathlive#0.26.0/dist/mathlive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span>$${{num}}^2 = {{square}}$$</span>
<span id="math"></span>
<button #click="addOne">Add One</button>
<button #click="randomInt">Random Number</button>
</div>

Vue watcher executed before the new data is bound?

I am using this code:
var vueApp = new Vue({
el: '#app',
data: {
modalKanji: {}
},
methods: {
showModalKanji(character) {
sendAjax('GET', '/api/Dictionary/GetKanji?character=' + character, function (res) { vueApp.modalKanji = JSON.parse(res); });
}
},
watch: {
'modalKanji': function (newData) {
setTimeout(function () {
uglipop({
class: 'modalKanji', //styling class for Modal
source: 'div',
content: 'divModalKanji'
});
}, 1000);
}
}
});
and I have an element that when clicked on, displays a popup with the kanji data inside:
<span #click="showModalKanji(kebChar)" style="cursor:pointer;>
{{kebChar}}
</span>
<div id="divModalKanji" style='display:none;'>
<div v-if="typeof(modalKanji.Result) !== 'undefined'">
{{ modalKanji.Result.literal }}
</div>
</div>
It works, but only when used with a setTimeout delay to "let the time for Vue to update its model"...if I remove the setTimeout so the code is called instantaneousely in the watch function, the popup data is always "1 iteration behind", it's showing the info of the previous kanji I clicked...
Is there a way for a watcher function to be called AFTER Vue has completed is binding with the new data?

I think you need nextTick, see Async-Update-Queue
watch: {
'modalKanji': function (newData) {
this.$nextTick(function () {
uglipop({
class: 'modalKanji', //styling class for Modal
source: 'div',
content: 'divModalKanji'
});
});
}
}

vue.js: how to handle click and dblclick events on same element

I have a vue component with separate events for click/dblclick. Single click (de)selects row, dblclick opens edit form.
<ul class="data_row"
v-for="(row,index) in gridData"
#dblclick="showEditForm(row,$event)"
#click="rowSelect(row,$event)"
>
Doing it like this, i get 3 events fired on double click. Two click events and lastly one dblclick. Since the click event fires first , is there a way (short of deferring click event for a fixed amount of ms) for stopping propagation of click event on double click ?
Fiddle here

As suggested in comments, You can simulate the dblclick event by setting up a timer for a certain period of time(say x).
If we do not get another click during that time span, go for the single_click_function().
If we do get one, call double_click_function().
Timer will be cleared once the second click is received.
It will also be cleared once x milliseconds are lapsed.
See below code and working fiddle.
new Vue({
el: '#app',
data: {
result: [],
delay: 700,
clicks: 0,
timer: null
},
mounted: function() {
console.log('mounted');
},
methods: {
oneClick(event) {
this.clicks++;
if (this.clicks === 1) {
this.timer = setTimeout( () => {
this.result.push(event.type);
this.clicks = 0
}, this.delay);
} else {
clearTimeout(this.timer);
this.result.push('dblclick');
this.clicks = 0;
}
}
}
});

<div id="example-1">
<button v-on:dblclick="counter += 1, funcao()">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods: {
funcao: function(){
alert("Sou uma funcao");
}
}
})
check out this working fiddle https://codepen.io/robertourias/pen/LxVNZX

i have a simpler solution i think (i'm using vue-class but same principle apply):
private timeoutId = null;
onClick() {
if(!this.timeoutId)
{
this.timeoutId = setTimeout(() => {
// simple click
}, 50);//tolerance in ms
}else{
clearTimeout(this.timeoutId);
// double click
}
}
it does not need to count the number of clicks.

The time must be short between click and click.
In order to get the click and double click, only one counter is required to carry the number of clicks(for example 0.2s) and it is enough to trap the user's intention when he clicks slowly or when he performs several that would be the case of the double click or default case.
I leave here with code how I implement these features.
new Vue({
el: '#app',
data: {numClicks:0, msg:''},
methods: {
// detect click event
detectClick: function() {
this.numClicks++;
if (this.numClicks === 1) { // the first click in .2s
var self = this;
setTimeout(function() {
switch(self.numClicks) { // check the event type
case 1:
self.msg = 'One click';
break;
default:
self.msg = 'Double click';
}
self.numClicks = 0; // reset the first click
}, 200); // wait 0.2s
} // if
} // detectClick function
}
});
span { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id='app'>
<button #click='detectClick'>
Test Click Event, num clicks
<span>{{ numClicks }}</span>
</button>
<h2>Last Event: <span>{{ msg }}</span></h2>
</div>

I use this approach for the same problem. I use a promise that is resolved either by the timeout of 200ms being triggered, or by a second click being detected. It works quite well in my recent web apps.
<div id="app">
<div
#click="clicked().then((text) => {clickType = text})">
{{clickType}}
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
click: undefined,
clickType: 'Click or Doubleclick ME'
},
methods: {
clicked () {
return new Promise ((resolve, reject) => {
if (this.click) {
clearTimeout(this.click)
resolve('Detected DoubleClick')
}
this.click = setTimeout(() => {
this.click = undefined
resolve('Detected SingleClick')
}, 200)
})
}
}
})
</script>
Working fiddle:
https://jsfiddle.net/MapletoneMartin/9m62Lrwf/

vue Component
// html
<div class="grid-content">
<el-button
　　 #click.native="singleClick"
　　 #dblclick.native="doubleClick"
　　 class="inline-cell">
click&dbclickOnSameElement</el-button>
</div>
// script
<script>
let time = null; // define time be null
export default {
name: 'testComponent',
data() {
return {
test:''
};
},
methods: {
singleClick() {
// first clear time
clearTimeout(time);
time = setTimeout(() => {
console.log('single click ing')
}, 300);
},
　　
doubleClick() {
clearTimeout(time);
console.log('double click ing');
}
}
}
</script>

selectedFolder = ''; // string of currently selected item
folderSelected = false; // preview selected item
selectFolder(folder) {
if (this.selectedFolder == folder) {
// double click
this.folderSelected = false;
this.$store.dispatch('get_data_for_this_folder', folder);
} else {
// single click
this.selectedFolder = folder;
this.folderSelected = true;
}
},

#click.stop handles a single click and #dblclick.stop handles double click
<v-btn :ripple="false"
class="ma-0"
#click.stop="$emit('editCompleteGrvEvent', props.item)"
#dblclick.stop="$emit('sendCompleteGrvEvent',props.item)">
<v-icon>send</v-icon>
</v-btn>

Unless you need to do expensive operations on single select, you can rework rowSelect into a toggle. Setting a simple array is going to be a lot faster, reliable, and more straightforward compared to setting up and canceling timers. It won't matter much if the click event fires twice, but you can easily handle that in the edit function.
<template>
<ul>
<li :key="index" v-for="(item, index) in items">
<a
:class="{ 'active-class': selected.indexOf(item) !== -1 }"
#click="toggleSelect(item)"
#dblclick="editItem(item)"
>
{{ item.title }}
</a>
<!-- Or use a checkbox with v-model
<label #dblclick="editItem(item)">
<input type="checkbox" :value="item.id" v-model.lazy="selected" />
{{ item.title }}
</label>
-->
</li>
</ul>
</template>
<script>
export default {
data: function () {
return {
items: [
{
id: 1,
title: "Item 1",
},
{
id: 2,
title: "Item 2",
},
{
id: 3,
title: "Item 3",
},
],
selected: [],
};
},
methods: {
editItem(item) {
/*
* Optionally put the item in selected
* A few examples, pick one that works for you:
*/
// this.toggleSelect(item); // If the item was selected before dblclick, it will still be selected. If it was unselected, it will still be unselected.
// this.selected = []; // Unselect everything.
// Make sure this item is selected:
// let index = this.selected.indexOf(item.id);
// if (index === -1) {
// this.selected.push(item.id);
// }
// Make sure this item is unselected:
// let index = this.selected.indexOf(item.id);
// if (index !== -1) {
// this.selected.splice(index, 1);
// }
this.doTheThingThatOpensTheEditorHere(item);
},
toggleSelect(item) {
let index = this.selected.indexOf(item.id);
index === -1
? this.selected.push(item.id)
: this.selected.splice(index, 1);
},
// For fun, get an array of items that are selected:
getSelected() {
return this.items.filter((item) => this.selected.indexOf(item.id) !== -1);
},
},
};
</script>