this is my code :
<b-form #submit="onSubmit" #reset="onReset" >
<b-card v-for="(item, index) in items" :key="item.name">
<input type="file"
style="visibility:hidden;"
id="file"
ref="file"
#click="printIndex(index)" #change.once="handleFileUpload($event.target,$event.target.files)"
/>
{{index}}
</b-card>
</b-form>
my model :
items: [{
name: "soldat",
margin: 3,
labour: 2,
finition: 1,
demandMax: 40,
demandMin: 0
},
{
name: "train",
margin: 2,
labour: 1,
finition: 1,
demandMax: 800,
demandMin: 0
}
]
printIndex() function only prints 0, while it should print 1 when I click on the second displayed input object .
The {{index}} displays correctly 1 on the second object (train) .
It is like the INPUT can't access the INDEX variable, because it is a v-for .
Do you experiment the same behavior ?
With a modified vue code like this :
<b-card v-for="(item, index) in items" :key="item.index" #click="printIndex(index)">
<input type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change.once="handleFileUpload($event.target,$event.target.files)"
/>
</b-card>
printIndex() is triggered 2 times when clicking on INPUT , and also gives 0 the second time, while it should only display the index 1 when clicking on my second object, just like in angularJs.
I have no solution, I am bloqued. If anyone has a solution, i would really appreciate it .
This is the printIndex method :
printIndex(index){
console.log(index)
}
EDIT : Excuse me, Some code was missing, added the #change . I suspect that there is a conflict between both #change and #click.
EDIT 2 :
<input v-model="index" #click="printIndex(index)"></input>
is working perfectly inside the v-for loop, the error seems to be linked to type="file" : this is the error :
**File inputs are read only. Use a v-on:change listener instead.**
EDIT 3 resolved, thank you
I have placed the printIndex() function above the hidden button , in the label, like this :
<label for="file" class="btn btn-secondary btn-block" #click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>
<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>
The main problem was that an input type ="file" is readonly, so you can't access his index .
Your model objects doesn't have any index property so :key="item.index" is just wrong. Use :key="index" instead...
EDIT 3 resolved, thank you
I have placed the printIndex() function above the hidden button , in the label, like this :
<label for="file" class="btn btn-secondary btn-block" #click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>
<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
#change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>
The main problem was that an input type ="file" is readonly, so you can't access his index .
Related
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
I have an array of colors. I want to use them to choose colors for the text. I use the radio button because I only want to select one. I custom the default radio by using a label. The problem I'm having is that the radio only selects one but my label can select multiple. How can I fix it? It's hard to understand so this is a picture about my problem
<div class="d-flex align-items-center flex-wrap mb-7">
<span class="w--26 flex-fixed pe-3 mb-5">{{
$t('setting.setting_theme.title_background')
}}</span>
<div v-for="color in list_colors" :key="color.id" class="me-5 mb-5">
<input
:v-model="color.checked"
type="radio"
class=""
:id="color.id"
name="selectTitleBackground"
#click="color.checked = !color.checked"
/>
<label
class="w--8 h--8 flex-center cursor-pointer border"
:for="color.id"
:style="{ backgroundColor: color.value }"
><i
v-if="color.checked"
:class="{ 'text-dark': color.value == '#fff' }"
class="fal fa-check text-light"
></i
></label>
</div>
</div>
enter image description here
The model that is used on the inputs is color.checked. This color object is coming from v-for="color in list_colors". So checking the input is changing each individual color object. You need to use a data property to store the checked color:
data() {
return {
selectedColorId: 1
}
}
<input
:v-model="selectedColorId"
type="radio"
:id="color.id"
:value="color.id"
name="selectTitleBackground"
/>
You also dont need the click event on the input as this should be handled by the input binding. https://v2.vuejs.org/v2/guide/forms.html#Radio
And the adding of the tick icon:
<i v-if="color.id === selectedColorId"
:class="{ 'text-dark': color.value == '#fff' }"
class="fal fa-check text-light"
></i>
when I edit a dict in a array which has been cloned from another dict,the value of the other cloned dictionaries also changes. Is there a way where i can change only the specified dictionary value??
<template v-for="stage in clonedstages">
<p v-text="stage.name" #click="stagedisplay=true" > </p>
<stage header="Stage Edit" :visible.sync="stagedisplay" :modal="true">
<div>
<div class="form-group">
<label for="stagename">Stage name </label>
<input type="text" class="form-control" id="stagename" v-model="[index]clonedstages.name">
</div>
</div>
<button class="btn btn-secondary" #click="stagedisplay=false">Done</button>
</stage>
</template>
<div class="col-sm">
<button class="btn-sm btn-primary" #click="Gd">GD</button>
`
interview: {
stage_type : 1,
description : "something",
name : "Interview"
},
clonedstages: [],
this is the dict,
Interview(){
vue_create.clonedstages.push(vue_create.interview);
},
this is the method.
I am new to this.
I have some questions getting from the database, It has options also. Then rendering those on the webpage.
like This
<div v-for="(question,index) in questions">
<div class="interview__item-text interview__text-main m-b-20">
{{ index+1 }}. {{ question.question }}
</div>
<div v-for="(option,index) in question.options"
class="reg__form-radioitem" :key="index">
<div>
<input class="checkbox countable__input"
v-model="question.answer"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
</div>
</div>
</div
This is working fine for input type text and radio but for checkbox it does not work. It checks all the checkboxes in that loop.
question.answer does not exist on the data.i am trying to add new property answer using v-model
Thanks.
Maybe you can try to predefine the question.answer, should exist after this:
data: {
question: {
answer: null
}
}
Try this.
<input class="checkbox countable__input"
v-model="question[answer]"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
I'm using Vue for the first time, with Vue Validator. Here is an example of my code:
<label for="first_name">First name:
<span v-if="$validation1.first_name.required" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
The only issue at the moment is that when I land on the page with my form, the whole thing is covered in errors. Is there a way I can suppress the errors and only show them on input blur / form submit?
Argh, the Google-able word isn't about blur, or on submit – its about timing and initial:
http://vuejs.github.io/vue-validator/en/timing.html
<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
you need to add .dirty or .touched to your validation
<label for="first_name">First name:
<span v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
I was dealing with a similar problem. I had to have an initialized variable for the input name: "" but I also wanted to have a required attribute in element.
So I add required when the event onblur occurs.
<input name="name" type="number" v-model="name" #blur="addRequired" />
const app = Vue.createApp({
data() {
return {
name: ""
}
},
methods:{
addRequired: function(event){
event.target.setAttribute("required", true);
}
}
});