I would like to bind a class on the input field where this class is suppose to be applied. In my case I have input fields that I am dynamically creating and since I can't bind values with v-model for input fields that are dynamically created I can't bind the class with v-model data.
This are the fields that I am creating inside of v-for loop:
<template v-for="input in ninjaForm.fields">
<div class="control">
<input
class="input is-large"
:class="{ hasValue: input.value }"
:ref="input.label.toLowerCase()"
:type="input.type"
:name="input.label.toLowerCase()"
:required="input.required == 1">
<label>{{ input.label }}</label>
</div>
</template>
I would like to know how can I bind a class now with that input field, so that I can check if the input field has some kind of value, so for example something like this:
:class="{ 'has-value' : this.input.value != ''}"
Hoe can I do that with Vue?
I think that you're trying to do a class binding using the Object Syntax
In your example, to apply the CSS class hasValue if your input has any value that isn't falsy, you'll have something like this :
<input
class="input is-large"
:class="{ hasValue: input.value }"
:ref="input.label.toLowerCase()"
:type="input.type"
:name="input.label.toLowerCase()"
:required="input.required == 1">
<label>{{ input.label }}</label>
Related
How to put inline if in checked property on input in the vuejs?
this is my code
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="if (index==0):'checked'">
</div>
Igot error message : avoid using JavaScript keyword as property name: "if"
Raw expression: :checked="if (index==0) 'checked'"
This is how to do:
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="index===0 ? true: false">
</div>
I'm new to Vue, and can't achieve quite a simple thing. I want to be able to use the loop index to set a unique name for an attribute. For example, I want to set the ID attribute to something like this: id="somename{{index}}", but that gives an interpolation inside attributes error.
<div v-for="(dt, index) in driveTrain" >
<input type="radio" id="driveTrain-{{index}}" >
<label for="driveTrain-{{index}}">{{dt}}</label>
</div>
you can bind the id dynamically using v-bind directly:
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="'driveTrain'+index">
<label :id="'driveTrain'+index">{{dt}}</label>
</div>
Or:
bind it using template literals :
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="`driveTrain${index}`">
<label :id="`driveTrain${index}`">{{dt}}</label>
</div>
I'm using a custom element to print the length of an input element. I got it working in a regular environment, but I have trouble creating unique refs in a repeat.for environment
I've tried using combinations of ref=name$index or ref=name${$index}, but none of them work so far.
In a non-repetitive environment, this works
<div class="row">
<label>
Name
<my-custom-element field.bind="name"></my-custom-element>
<input
type="text"
name="name"
ref="name"
value.bind="name"
maxlength="150" />
</label>
</div>
However, once I use repeat for, it stops working, cause I am using field.bind and ref wrongly. E.g.
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="name${$index}"></my-custom-element>
<input
type="text"
name="name${$index}"
ref="name${$index}"
value.bind="item.name"
maxlength="150" />
</label>
</div>
I'm just trying to make the ref look something like name0, name1, name2 etc, so that it is unique.
The error looks like Parser Error: Unconsumed token { at column 5 in expression [name${$index}]
You are iterating through items, which presumably is an array of objects having a name property. I think you want something more like the following:
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="item.name"></my-custom-element>
<input
type="text"
name="item.name"
ref="item.name"
value.bind="item.name"
maxlength="150" />
</label>
What I am trying to achieve is a component that deals conditionally with new input or old input(edit). I've tried this, inspired by this question:
<input type="text" placeholder="New Event" v-model="event.title ? event.title : title" required/>
or even
<input type="text" placeholder="New Event" v-model="event.title || title" required/>
but both don't work. I get errors in the console.
event.title comes from prop event;
title is a property in the data object with the value of ''.
In Vue 2 do I need to build 2 separate components? One for new input and another for editing?
You can try this one, it works for me :
<td>
<div v-if="event">
<input v-model="event.title">
</div>
<div v-else><input v-model="title"></div>
</td>
I think you can use computed for this purpose like below :
<input type="text" placeholder="New Event" v-model="nameOfMethod" required/>
and within computed methods create nameOfMethod with your logic like this :
computed:{
nameOfMethod(){
if (this.event.title === "")
return this.title;
else
return this.event.title;
},
}
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.