In this below code click on the reset button to uncheck all radio buttons but I have to click on the reset button to check the default radio button
<div id="app">
<div v-for="(val, key) in list">
<input type="radio" name="radio" :value="val" v-model="selected" :id="val" #click="uncheck( val )"><label :for="val">{{ val }}</label>
</div>
<button #click="uncheckAll">Reset</button>
</div>
var app = new Vue({
el: '#app',
data: {
list: ['one', 'two', 'three'],
selected: 'two',
previous: null,
},
methods: {
uncheck: function(val) {
if (val == this.previous) {
this.selected = false;
}
this.previous = this.selected;
},
uncheckAll: function() {
this.selected = false;
},
}
})
It's working fine but I need to reset the selected value, for that, I can not find any solution there.
Please take a look at following snippet (just set default value on reset):
var app = new Vue({
el: '#app',
data() {
return {
list: [ 'one', 'two', 'three' ],
selected: 'two',
}
},
methods : {
uncheck(){
this.selected = 'two';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(val, key) in list">
<input type="radio" name="radio" :value="val" v-model="selected" :id="val">
<label :for="val">{{ val }}</label>
</div>
<button #click="uncheck">Reset</button>
{{ selected }}
</div>
Related
I have a input with type=radio
<div id="test">
<div class="input-group mb-3" v-for="(input, k) in inputs" :key="k">
<input type="radio" class="abc" disabled>
</div>
</div>
How can on click button i can change all inputs with class="abc" from radio to checkbox
<script>
var app = new Vue({
el: "#test",
methods: {
changeInputType(e) {
if (e.target.checked == true) {
alert('true');
} else {
alert('false');
}
},
}
});
</script>
is any simple way to do this in this changeInputType function ?
bind the input type to variable and change that variable
<template>
<div>
<input :type="inputType" />
<button #click="changeType />
</div>
</template>
<script>
export default {
data() {
return {
inputType: "text",
}
},
methods: {
changeType() {
if (this.inputType === "text") {
this.inputType = "radio"
} else {
this.inputType = "text"
}
}
}
}
</script>
Here is the solution of your answer, By clicking on button all input types will be changed from radio to checkbox.
<div id="test">
<div class="input-group mb-3" v-for="(input, k) in inputs" :key="k">
<input :type="input" class="abc" disabled>
</div>
<div class="btn btn-sm" #click="changeInputType">Change Input Type</div>
</div>
<script>
var app = new Vue({
el: "#test",
data() {
return {
inputs: ['radio', 'radio']
}
},
methods: {
changeInputType() {
this.inputs = ['checkbox', 'checkbox']
},
}
});
</script>
On butt click change the type variable to checkbox.
<script>
var app = new Vue({
el: "#test",
data() {
return {
input: 'radio'
}
},
methods: {
btnClick() {
this.input = 'checkbox'
},
}
});
</script>
I've a Vue component in which I'm trying to autofocus the first field using v-focus. But my problem is, I've dynamic components that will be included at the top of the page. So in that case how can I apply autofocus to dynamically included component?
They key is to set ref on all your inputs to the same string like this:
<input type="text" ref="myInputs"/>
Then you will have access to an array called this.$refs.myInputs inside an event handler.
So you just need to do
this.$refs.myInputs[0].focus();
new Vue({
el: "#app",
mounted() {
this.$refs.myInputs[0].focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<div v-for="index in 3" :key="index">
<input ref="myInputs" type="text" />
</div>
</div>
</div>
It's hard to tell how you're adding the input(s) to the DOM, without any pseudo code from you, but this is one way to do it..
[CodePen mirror]
new Vue({
el: "#app",
data: {
inputs: ["firstName", "lastName"]
},
watch: {
inputs() {
this.$nextTick(() => {
this.focusFirstInput();
});
}
},
methods: {
focusFirstInput() {
let first = this.inputs[0];
let firstInput = this.$refs[first][0];
firstInput.focus();
},
handleClick() {
this.inputs.push("newInput");
}
},
mounted() {
this.focusFirstInput();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<div v-for="(input, index) in inputs" :key="index">
<input :ref="input" type="text" />
</div>
<div>
<button type="button" #click="handleClick">Click to add input</button>
</div>
</div>
</div>
I found this answer on Laracast and it worked for me. All I did was insert the code below in my dynamic form field.
this.$nextTick(() => {
let index = this.items.length - 1;
let input = this.$refs.title[index];
input.focus();
});
HTML
<div id="app">
<ul v-for="item in items">
<li>
<input :ref="'title'" v-model="item.title">
</li>
</ul>
<button v-on:click="addItem">Add Item</button>
</div>
JS
let app = new Vue({
el: '#app',
data: {
items: [
{title: 'Apple'},
{title: 'Orange'},
]
},
methods: {
addItem(){
this.items.push({title: "Pineapple"});
this.$nextTick(() => {
let index = this.items.length - 1;
let input = this.$refs.title[index];
input.focus();
});
}
}
});
Note: make sure to add :ref="'title'" into your dynamic form field.
Credits to the original author of the solution.
i have a row with 3 components(in which is a defined component 1, component 2 and component 3, as showed in my previous question:
VueJs component undefined )
how can i add a row or remove a row (in which has 3 components) using v-for?
var data1={selected: null, items:["A", "B"]};
Vue.component('comp1', {
template: `<select v-model="selected">
<option disabled value="">Please select</option>
<option v-for="item in items" :value="item">{{item}}</option>
</select>`,
data:function(){
return data1
}
});
<!---similar for component 2 and 3--->
new Vue({
el: '#app',
data: {
rows:[]
},
methods:{
addRow: function(){
this.rows.push({});
},
removeRow: function(row){
//console.log(row);
this.rows.$remove(row);
}
},
});
in .html
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for ="row in rows">
<comp1></comp1>
<comp2></comp2>
<comp3></comp3>
<button #click="addRow">Add Row</button>
<button #click="removeRow(row)">Remove Row</button>
</div>
</div>
The code is pretty close. Try this.
console.clear()
const template = {
template: `<select v-model="selected">
<option disabled value="">Please select</option>
<option v-for="item in items" :value="item">{{item}}</option>
</select>`,
data: function() {
return {
selected: null,
items: ["A", "B"]
}
}
};
Vue.component("comp1", template)
Vue.component("comp2", template)
Vue.component("comp3", template)
new Vue({
el: '#app',
data: {
rows: []
},
computed:{
newId(){
return this.rows.length == 0 ? 1 : Math.max(...this.rows.map(r => r.id)) + 1
}
},
methods: {
addRow: function() {
this.rows.push({id: this.newId });
},
removeRow: function(row) {
this.rows.splice(this.rows.indexOf(row), 1)
}
},
});
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="row in rows" :key="row.id">
<comp1></comp1>
<comp2></comp2>
<comp3></comp3>
<button #click="removeRow(row)">Remove Row</button>
</div>
<button #click="addRow">Add Row</button>
</div>
This code moves the add row button outside the loop, because you don't really need multiple add row buttons. Additionally, it adds a key for each div in the loop so that Vue can properly remove components when necessary. In order to generate the key, the code creates an id property for each new row object.
When new bars value are set, the data is not updated. Please check below;
I'm planning to do dynamic bars and buttons. Once the buttons are clicked, the new values will be updated to bars values.
Here is the link
HTML
<h1><span>Vue.js</span> Progress Bar</h1>
<div id="app">
<div v-for="(index, bar) in bars" class="shell">
<div class="bar" :style="{ width: bar + '%' }" .>
<span>{{ bar }}%</span>
<input type="radio" id="radio-bar" value="{{ index }}" v-model="picked" v-on:change="set(index)">
</div>
</div>
<span v-for="(index, button) in buttons">
<button value="{{ button }}" #click.prevent="makeProgress(button)">{{ button }}</button>
</span>
<br>
<p>Selected Bar: {{ picked }}</p>
<p>Button Value: {{ buttonVal }}</p>
</div>
JS
var dataURL = 'http://pb-api.herokuapp.com/bars';
var vm = new Vue({
el: "#app",
data: {
maxColor: "#F22613",
bars: [],
buttons: [],
limit: 0,
selectedBar: 0,
buttonVal: 0
},
methods: {
fetchData: function(params) {
this.$http.get(dataURL, function(data) {
this.$set('bars', data.bars);
this.$set('buttons', data.buttons);
this.$set('limit', data.limit);
console.log(params);
});
},
set: function(index) {
this.selectedBar = index;
},
makeProgress: function(button) {
var self = this;
self.buttonVal += button;
this.reachMax();
Vue.set(this.bars, 0, 55);
},
reachMax() {
if(this.buttonVal >= this.limit){
alert('Reached Limit' + this.limit)
}
}
},
created: function() {
this.fetchData();
}
});
Is it possible to bind the div value 1 or 2 to implicitly pass it to getValue instead of the manual assignments below?
<div id="app">
{{value}}
<div #click="getValue(1)">1</div>
<div #click="getValue(2)">2</div>
</div>
new Vue({
el: 'app',
data: {
value: ''
},
methods: {
getValue: (v) => this.value = v
}
})
<div id="app">
{{value}}
<div #click="getValue">1</div>
<div #click="getValue">2</div>
</div>
new Vue({
el: 'app',
data: {
value: ''
},
methods: {
getValue: (event) => this.value = event.target.textContent
}
})
If the actual content of the div is hardcoded, I guess that the call will be hardcoded too...
You could try:
<div id="app">
{{value}}
<div v-for="val in values" #click="getValue(val)">{{ val }}</div>
</div>
And then:
new Vue({
el: 'app',
data: {
value: '',
values: [1, 2]
},
methods: {
getValue: (v) => this.value = v
}
})