How do i take radio value checked in vuejs? - vue.js

I have this code so far, i try to take the value from radio button.I can take from v-model value but with radio i have some problems.For example if i have more radio buttons how i can take the checked one.
new Vue({
el:'#root',
data:{
removelines: [
{value:'a'},
{value:'b'}
]
},
methods:{
insert:function(){
let vueIn = this;
axios.post('/vue', {removelines: vueIn.removelines.value}).then(
function(response){
vueIn.removelines = response.data.removelines.value;
}
).catch(function(error){ console.log(error.message); });
}
}
});
html code here:
<div class="card-block">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning active">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="a" checked>
Yes
</label>
<label class="btn btn-warning">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="b">
No
</label>
</div>
</div>

Check this working sample, please.
new Vue({
el: '#root',
data: {
removelines: 'b'
}
});
<script src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="root">
<div class="card-block">
{{ removelines }}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning active">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="'a'" checked>
Yes
</label>
<label class="btn btn-warning">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="'b'">
No
</label>
</div>
</div>
</div>

Related

How to focus click on input vue

how do i focus input with a button onClick?
<div class="form-group"
v-for="(file, i) in registerData.requiredDocuments"
:key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file"
:name="file.name"
class="form-control-file"
:id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
i was hoping by clicking the 'choose file' button it would trigger the input. I've tried
// the input
<input :ref="file.name" type="file">
// the button
<button #click="$refs.file.name.focus()">Choose File</button>
but what i get is the name is undefined anyone knows how to fix this?
I had similar problem before, Here is how and did it.
<template>
<div>
<div class="form-group" v-for="(file, i) in registerData.requiredDocuments" :key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file" :ref="'file' + i" :name="file.name" class="form-control-file" :id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button #click.prevent="setFileFocus(i)" class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setFileFocus(index) {
this.$nextTick(function(){
this.$refs[("file" + index)][0].focus()
})
}
}
}
</script>
I called focus on nexttick. Hope my answer will be helpful

Vue.js Bootstrap 4 , cannot check radio button

I am trying to check by default the Mrs radio button... but it does not work ... I also tried to add a checked attribute wo any success //
what could be wrong with my coding ?
<div class="col-lg-9">
<form>
<!-- Full name -->
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<div class="input-group-text pb-0">
<label class="form-group-label active"><input v-model="gender" type="radio" value="Mrs"> Mrs</label>
</div>
<div class="input-group-text pb-0">
<label><input v-model="gender" type="radio" name="gender" value="Mr"> Mr</label>
</div>
</div>
<input v-model="username" #input="$v.username.$touch" v-bind:class="{ error: $v.username.$error, valid: $v.username.$dirty && !$v.username.$invalid }" type="text" class="form-control" placeholder="Indiquez votre prénom et votre nom">
</div>
</form>
</div>
This is how you might do it. I've added the toggle button to show how this binding works:
new Vue({
el: '#app',
data: {
radio: 'mrs',
},
methods: {
toggle() {
this.radio = this.radio === 'mrs' ? 'mr' : 'mrs';
}
},
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input v-model="radio" type="radio" value="mrs">
<label>Mrs</label>
<input v-model="radio" type="radio" value="mr">
<label>Mr</label>
<button #click="toggle">Toggle</button>
</div>
EDIT: Snippet fixed and updated
You need have the value for gender set in the data model.
https://www.codeply.com/go/KDKbm4PTBO
<label class="form-group-label active">
<input v-model="gender" type="radio" value="Mrs"> Mrs
</label>

Radio buttons in Vuejs 2.0

I'm building a small application in VueJS 2.0 and I'm using Inspinia premium admin template, where I'm having a radio buttons something like this:
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white active">
<input type="radio" v-model="taskTime" value="7" name="taskTime"> Week
</label>
<label class="btn btn-sm btn-white">
<input type="radio" v-model="taskTime" value="30" name="taskTime"> Month
</label>
</div>
When any of the buttons being selected or if taskTime data is changed I'm calling a function, so for this I've watch function:
watch: {
taskTime(newValue) {
console.log('clicked');
}
}
I'v properly defined v-model/data in my data set
data() {
return {
taskTime: ''
}
},
JSFiddle in my case: https://jsfiddle.net/60q14y26/
I don't know why it is not working, I guess something is preventing from executing this. Help me out with these.
Thanks
<div id="app">
<div data-toggle="buttons" class="btn-group">
taskTime {{ taskTime }}
<label class="btn btn-sm btn-white active">
<input type="radio" v-model="taskTime" value="7" name="taskTime"> Week
</label>
<label class="btn btn-sm btn-white">
<input type="radio" v-model="taskTime" value="30" name="taskTime"> Month
</label>
</div>
</div>
var vm = new Vue({
el: '#app',
data() {
return {
taskTime: null
}
},
watch: {
taskTime(newValue) {
console.log('clicked');
}
}
})
This is working snippet. You missed one "}" in your fiddle ;)
jsfiddle
version with counter
And one more thing: your build system can remove console.log from final code.

How to hide / show component in vuejs

I'm developing a small application in VueJs where I'm having a div element and trying to show element if the data value is 1 and hide if the data value is 0, for this I'm having v-model as withClient something like this:
<div class="col-sm-6">
<label class="col-sm-6 control-label">With client*:</label>
<div class="radio col-sm-3">
<input type="radio" name="with_client" v-model="withClient" value="1" checked="">
<label>
Yes
</label>
</div>
<div class="radio col-sm-3">
<input type="radio" name="with_client" v-model="withClient" value="0">
<label>
No
</label>
</div>
</div>
And the element which needs to be hidden:
<div class="col-sm-6">
<label class="col-sm-3 control-label">Clients:</label>
<div class="col-sm-8" v-if="withClientSelection">
<v-select
multiple
:options="contactClients"
:on-search="getOptions"
placeholder="Client name"
v-model="clientParticipants">
</v-select>
</div>
</div>
I've computed property as withClientSelection:
withClientSelection() {
if(this.withClient === 0)
{
this.clientParticipants = ''
return false
}
else
{
return true
}
}
But somehow I'm not able to get this. Help me on this. Thanks
It's actually very simple, you should use
this.withClient === '0'
instead of
this.withClient === 0
I also overlooked this part and verified your code myself first, here's a fully working example that I used.
Vue.component('v-select', VueSelect.VueSelect);
const app = new Vue({
el: '#app',
data: {
withClient: '0',
clientParticipants: '',
dummyData: ['Aaron', 'Bart', 'Charles', 'Dora', 'Edward', 'Flora', 'Gladys', 'Heidi', 'Iris', 'Jason'],
contactClients: []
},
computed: {
withClientSelection() {
if (this.withClient === '0') {
return false
}
return true
}
},
watch: {
withClient(newVal) {
if (newVal === 0) {
this.clientParticipants = '';
}
}
},
methods: {
getOptions(search, loading) {
/*
loading(true)
this.$http.get('https://api.github.com/search/repositories', {
q: search
}).then(resp => {
this.contactClients = resp.data.items
loading(false)
})
*/
this.contactClients = this.dummyData
.filter((name) => name.toLowerCase().indexOf(search.toLowerCase()) >= 0);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.3.4"></script>
<script src="https://unpkg.com/vue-select#latest"></script>
<div id="app">
<div class="col-sm-6">
<label class="col-sm-6 control-label">With client*:</label>
<div class="radio col-sm-3">
<input type="radio" name="with_client" v-model="withClient" value="1" checked="">
<label>
Yes
</label>
</div>
<div class="radio col-sm-3">
<input type="radio" name="with_client" v-model="withClient" value="0">
<label>
No
</label>
</div>
</div>
<div class="col-sm-6">
<label class="col-sm-3 control-label">Clients:</label>
<div class="col-sm-8" v-if="withClientSelection === true">
<v-select
multiple
:options="contactClients"
:on-search="getOptions"
placeholder="Client name"
v-model="clientParticipants">
</v-select>
</div>
</div>
<div class="col-sm-6">
<label class="col-sm-3 control-label">Selected Clients:</label>
<div class="col-sm-8" v-if="withClientSelection === true">
{{clientParticipants}}
</div>
</div>
</div>
I think the intention with v-model on hidden inputs is to set up a one-way binding, in which case it's much better to use
<input type="hidden" :value="someData" >
You can try this, it will help you to solve your problem.
new Vue({
el: '#app',
data: {
clientParticipants: '',
withClientSelection: 1
},
methods: {
checkMe: function(type) {
return this.withClientSelection = type
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="col-sm-6">
<label class="col-sm-6 control-label">With client*:</label>
<div class="radio col-sm-3">
<input type="radio" name="with_client" #change="checkMe(1)" checked="">
<label>
Yes
</label>
</div>
<div class="radio col-sm-3">
<input type="radio" name="with_client" #change="checkMe(0)">
<label>
No
</label>
</div>
</div>
<div class="col-sm-6">
<label class="col-sm-3 control-label">Clients:</label>
<div class="col-sm-8" v-if="withClientSelection">
Display now!
<v-select
multiple
:options="contactClients"
:on-search="getOptions"
placeholder="Client name"
v-model="clientParticipants">
</v-select>
</div>
</div>
</div>

Bootstrap radio button & check box not diplayed

<div class="form-group" id="q-row5">
<div class="row">
<div class="col-sm-5 has-feedback">
<label for="preferContact" class="control-label">Preferred Contact Method *:</label>
<div>
<input class="control-label" id="Phone call" name="preferedContact[]" type="checkbox" value="1">
<label for="Phone call">Phone call</label>
</div>
<div>
<input class="control-label" id="Text" name="preferedContact[]" type="checkbox" value="2">
<label for="Text">Text</label>
</div>
<div>
<input class="control-label" id="Email" name="preferedContact[]" type="checkbox" value="3">
<label for="Email">Email</label>
</div>
<div>
<input class="control-label" id="Any" name="preferedContact[]" type="checkbox" value="4">
<label for="Any">Any</label>
</div>
</div>
<div class="col-sm-7 has-feedback">
<label for="messageType" class="control-label">What type of message may we leave when we contact you? *:</label>
<div style="">
<input class="control-label" id="messageTypeValDiscreet" name="messageTypeVal" type="radio" value="1">
<label for="messageTypeValDiscreet">Discreet</label>
</div>
<div style="">
<input class="control-label" id="messageTypeValAny" name="messageTypeVal" type="radio" value="2">
<label for="messageTypeValAny">Any</label>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#enrollForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok icon-success',
invalid: 'glyphicon glyphicon-remove icon-fail',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
messageTypeVal: {
row: '.col-sm-7',
validators: {
notEmpty: {
message: 'Message type is required'
}
}
},
'preferedContact[]': {
row: '.col-sm-5',
validators: {
choice: {
min: 1,
message: 'Please choose prefered contact atleast 1'
}
}
}
}
});
});
</script>
attached image
My question is for the last options in both checkbox & radio button the label only is diplayed, the radio button and the checkbox is not displayed in both. I have attached the image. Please let me know what is the issues in code. If i remove the validation it works else it not working properly.