How do I ask the user for a confirmation before changing the option in a radio button using Vue.js?
Something like Are you sure? would be fine.
Assuming you have the following DOM structure:
<div id="app">
<input type="radio"/>
</div>
you can bind a #change directive to the radio button with a method implementing the expected "Are you sure?" confirmation popup. So you can enrich the above mentioned DOM structure like this:
<div id="app">
<input type="radio" #change="showConfirm"/>
</div>
And in the Vue instance you can define the expected confirmation method, for example:
new Vue({
el: '#app',
methods: {
showConfirm: function(event) {
event.preventDefault();
let checkedRadio = window.confirm("Are you sure?");
event.target.checked = checkedRadio;
}
}
})
Here you find the working example.
Related
<label class="label-set">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
How to open popup, onclick of link. simple popup should open as soon as user click on link
In html
give a id to your a tag.
<label class="label-set" id="mainId">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
In javascript
document.getElementById("newId").addEventListener("click", function(){
confirm("confirm this") // or your popop code
})
Try this for vue.js
Terms of Use
And write this inside your method
new Vue({
el: '#mainId',
methods: {
openPopup: function () {
alert('ok')
}
}
})
Try this
Make a modal component. Add a click to your a tag. When clicked show your modal component. After another action (confirm etc.) close and continue.
How to make a reusable modal component in Vue.js: How to make a Modal Component
The Vue.js ecosystem comes with some handy modifiers for use with form inputs.
<input v-model.lazy="msg">
<input v-model.trim="msg">
<input v-model.number="msg">
I was wondering if it were possible to chain such modifiers, perhaps something like this:
<input v-model.lazy.trim="msg">
If not, has anyone any experience of making their own modifiers?
Unfortunately it doesn't look like you can make custom modifiers the moment, there's some desire for the feature here. Your best option IMO is to make a custom component and then emit the modified value based on what you need.
I made a quick app (included below) to test chaining modifiers and it does work.
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
computed: {
len: function() {
return this.message.length;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model.lazy.trim="message" />
<span style="background:yellow">{{ message }}</span>
<span>{{len}}</span>
</div>
I am creating a form which needs to have a button and when clicked a new component which is only an input field would be added.
For example I have only one field to put in my address, but my adress is very long so I need 2 additional input fields. I click a button twice and two more components with the input appear.
What is a proper way to achieve this functionality?
Here is a simple solution to your question.
https://jsfiddle.net/RiddhiParekh/usd57zkb/6/
Template =>
<div id="vue-instance">
<button #click="addInput">Click to add input</button>
<br>
Address:
<div v-for="i in count">
<input type="text">
</div>
</div>
Script =>
var vm = new Vue({
el: '#vue-instance',
data: {
count:1
},
methods:{
addInput(){
this.count = this.count+1
}
}
});
First of all, please be kind. I'm new to VueJS coming from the Angular world where things are different ;-)
I am creating a multi-page website using VueJS for simple things like a floaty header and submission of forms etc. I'd like the markup for my contact form to be in my HTML (rendered by the CMS) and I'd like to have VueJS handle the form submission and replacing the form with a thank-you message. So, a simplified version of the form would look like this.
<contact-form>
<form class="contact-form_form">
...
<input name="emailaddress" type="text" />
...
<button></button>
</form>
<div class="contact-form_thanks">
Thanks for filling in this lovely form
</div>
</contact-form>
So, the obvious thing to do is to create a VueJS component, but I don't want it to introduce a new template, I just want it to submit the form when the button is pressed (using Axios) and hide the form and show the thank you message.
I know how to do all of this in angular using attribute directives and ng-show/hide etc. but can't really see how to do this in VueJS because all the tutorials are geared to wards SPAs and Single file components with templates.
Any kick in the right direction would be appreciated.
Seems like you just want a data item indicating whether the form has been submitted, and v-if and v-else to control what displays in either case.
new Vue({
el: 'contact-form',
components: {
contactForm: {
data() {
return { hasBeenSubmitted: false };
},
methods: {
doSubmit() {
console.log("Some behind-the-scenes submission action...");
this.hasBeenSubmitted = true;
}
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<contact-form inline-template>
<div v-if="hasBeenSubmitted" class="contact-form_thanks">
Thanks for filling in this lovely form
</div>
<form v-else class="contact-form_form">
...
<input name="emailaddress" type="text" /> ...
<button #click.prevent="doSubmit">Submit</button>
</form>
</contact-form>
I am trying to learn vue.js and javascript, so this is probably easy for those who already have walked the path... so please show me the way...
I want to have a universal function that passes parameters so...
in HTML
I have a call to function with div id parameter
<button #click="showdiv('user_likes')" type="button" class="btn btn-default">+</button>
In vue all the div elements are by default false.
This is my function in Vue.js methods
changediv: function(data){
data==false ? data=true : data=false;
},
All hints are appreciated
Button without a method
To complement the existing answer, since this case is a simple toggle, you can reduce the amount of code by getting rid of the method showDiv entirely. This should not be used if you have more complex logic since it could compromise readability: https://jsfiddle.net/8pLfc61s/
HTML:
<div id="demo">
<button #click="showParagraph = !showParagraph">Toggle paragraph with button</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Checkbox with v-model
Another cool trick is to use a checkbox with v-model, although in this case the amount of markup is increased, so probably not a worthy tradeoff: https://jsfiddle.net/v09tyj36/
HTML:
<div id="demo">
<label class="button">
Toggle Paragraph with checkbox
<input type="checkbox" v-model="showParagraph">
</label>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Here's a fiddle that replicates what you're trying to to: https://jsfiddle.net/9wmcz2my/
HTML:
<div id="demo">
<button #click="showDiv('showParagraph')">Click me</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
},
methods : {
showDiv: function(param){
this[param] = !this[param]
},
}
})