I'm developing an app that has different license types, and according to the license we need to disable/enable inputs.
One way is to put a conditional :disabled for each input but that's a lot of work and error prone, since we might forget to put it on some inputs.
I thought of using a directive like v-disable-all that searches for all inputs under the container and adds disabled to them.
I was wandering if there is a better solution or if there is already a solution like this?
I ended up creating this directive:
import Vue from "vue";
Vue.directive("disable-all", {
// When all the children of the parent component have been updated
componentUpdated: function(el, binding) {
if (!binding.value) return;
const tags = ["input", "button", "textarea", "select"];
tags.forEach(tagName => {
const nodes = el.getElementsByTagName(tagName);
for (let i = 0; i < nodes.length; i++) {
nodes[i].disabled = true;
nodes[i].tabIndex = -1;
}
});
}
});
I'am coming a bit late, but there is an attribute on the HTML element called "disabled", which ... disable every input in the tree.
<fieldset :disabled="!canEdit">
...
</fieldset>
canEdit could be a computed property or anything you want.
You can do something like this:
let elems = document.getElementById('parentDiv').getElementsByTagName('input');
This will give you all the inputs inside a parent, then you can run a simple for loop to loop over them and set each one to disabled.
Something like this:
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
Hope this helps set you on the right path.
let elems = document.getElementById('someid').getElementsByTagName('input');
console.log(elems);
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
<html>
<body>
<div id="someid">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
Now you just need to wrap your fields inside <v-form :disabled="variable"></v-form>
Related
I have many inputs on my forms. After I got data from API, I looped to display all inputs. Then I want to disable them. I do not want to disable all inputs one by one on my loop, because I had many loops and inputs on my forms. I want to write a block of code can solved my problem.
I try to use this code for disable them, but it can only disabled on input that created before load data.
let inputs = document.getElementsByTagName('input')
for(let i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
Thanks!
if you are using vue.js then you can set a veriable like disable and set it like this
<template>
<input type="text" :disabled="disable">
<input type="text" :disabled="disable">
<input type="text" :disabled="disable">
.
.
.
</template>
and in vue script
data() {
return {
// other vars,
disable: false,
}
},
methods: {
methodToLoadData() {
// Load data
this.disable = true;
},
},
I have an array of names, and if a user try to update one of them and is duplicate, I want to do something (error message) The problem is that is always duplicate. Pname will be changed on every keypress. I am not sure how to store the initial array and to compare with it.
<input
v-model="Pname"
type="text"
class="form-control"
/>
for(let element of this.customer_names){
if(this.Pname == element.name){
duplicateValue = +1;
}
}
You can do something as simple as:
if(this.customer_names.indexOf(this.Pname) != -1) {
// there is a duplicate somewhere
}
Put that code in your change/key-up event listener
You can use #blur like this:
<input
v-model="Pname"
type="text"
class="form-control"
#blur="findDuplicate"
>
function findDuplicate () {
if(this.customer_names.indexOf(this.Pname) != -1) {
// There is a duplicate
}
}
So, by this when you click outside, after you are done with typing, it will run that findDuplicate function.
Alright, I have these two divs with a mouseover and they have the same function. Now the problem is that if I mouse over one of them then BOTH shines. How to solve this? So shines one by one when I hover them.
DIVS:
<div class="latestItemBody" #mouseover="shineItemIcon"
#mouseout="shineOff" :style="{background: activeCardBg}">
<div class="latestItemBody" #mouseover="shineItemIcon"
#mouseout="shineOff" :style="{background: activeCardBg}">
Functions:
methods: {
shineItemIcon() {
this.activeCardBg = '#7a00ff';
this.bounce = 'animated bounceIn';
},
shineOff() {
this.activeCardBg = '';
this.bounce = '';
}
The reason why they both "shine" is because you have activeCardBg bound to both of them, which changes the background.
You could add the shine effect with pure CSS like this instead.
// CSS
.latestItemBody:hover {
background-color: #7a00ff
}
If you want to do this with JS, it could be done like this.
// Template
<div
class="latestItemBody"
#mouseover="shineItemIcon"
#mouseout="shineOff">
</div>
<div
class="latestItemBody"
#mouseover="shineItemIcon"
#mouseout="shineOff">
</div>
// Methods
shineItemIcon(e) {
e.target.style.backgroundColor = '#7a00ff';
this.bounce = 'animated bounceIn';
},
shineOff(e) {
e.target.style.backgroundColor = '';
this.bounce = '';
}
pass the div id as parameter to the shineitemicon and shineoff function. depending upon the condition set 'activeCardBg' value. give activecardBg1 to first div and activeCardBg2 to second div.
I'm using Vega-Lite with VueJs and I need to dynamically render a list of charts generated after a user action.
I have the following HTML code:
<div v-for="(chart, index) in possibleCharts" :key="index" :id="'chart'+index"></div>
And in the JavaScript side, I have something like this:
for(let i = 0; i<possibleCharts.length; i++){
vegaEmbed("#chart"+i, possibleCharts[i].spec);
}
But rendering does not happen because the DOM elements are dynamically generated and apparently this does not work that way... Does anyone know how I can solve this problem? Thx!
It should be this.possibleCharts instead of possibleCharts
If possibleCharts is load asynchronously, you should watch this value and render after that using $nextTick. Thanks.
watch: {
possibleCharts() {
this.$nextTick(() => {
for (let i = 0; i < this.possibleCharts.length; i++) {
vegaEmbed("#chart" + i, this.possibleCharts[i].spec);
}
})
}
}
Hope this will help.
Short question: How can I validate a parent form when the validation is part of child custom elements?
Long version:
I built a reusable custom element which includes validation which is working like I expect it to do:
validated-input.html:
<template>
<div class="form-group" validate.bind="validation">
<label></label>
<input type="text" value.bind="wert" class="form-control" />
</div>
</template>
validated-input.js:
import { bindable, inject } from 'aurelia-framework';
import { Validation } from 'aurelia-validation';
#inject(Validation)
export class ValidatedInputCustomElement {
#bindable wert;
constructor(validation) {
this.validation = validation.on(this)
.ensure('wert')
.isNotEmpty()
.isGreaterThan(0);
}
}
I will have some forms that will use this custom element more than once in the same view (can be up to 8 or 12 times or even more). A very simplified example could look like this:
<template>
<require from="validated-input"></require>
<form submit.delegate="submit()">
<validated-input wert.two-way="val1"></validated-input>
<validated-input wert.two-way="val2"></validated-input>
<validated-input wert.two-way="val3"></validated-input>
<button type="submit" class="btn btn-default">save</button>
</form>
</template>
In the corresponding viewmodel file I would like to ensure that the data can only be submitted if everything is valid. I would like to do something like
this.validation.validate()
.then(() => ...)
.catch(() => ...);
but I don't understand yet how (or if) I can pull the overall validation into the parent view.
What I came up with up to now is referencing the viewmodel of my validated-input like this:
<validated-input wert.two-way="val1" view-model.ref="vi1"></validated-input>
and then to check it in the parent like this:
this.vi1.validation.validate()
.then(() => ...)
.catch(() => ...);
but this would make me need to call it 8/12/... times.
And I will probably have some additional validation included in the form.
Here is a plunkr with an example:
https://plnkr.co/edit/v3h47GAJw62mlhz8DeLf?p=info
You can define an array of validation objects (as Fabio Luz wrote) at the form level and then register the custom element validations in this array. The validation will be started on the form submit.
The form code looks like:
validationArray = [];
validate() {
var validationResultsArray = [];
// start the validation here
this.validationArray.forEach(v => validationResultsArray.push(v.validate()));
Promise.all(validationResultsArray)
.then(() => this.resulttext = "validated")
.catch(() => this.resulttext = "not validated");
}
validated-input.js gets a new function to register the validation
bind(context) {
context.validationArray.push(this.validation);
}
The plunker example is here https://plnkr.co/edit/X5IpbwCBwDeNxxpn55GZ?p=preview
but this would make me need to call it 8/12/... times.
And I will probably have some additional validation included in the form.
These lines are very important to me. In my opinion (considering that you do not want to call 8/12 times, and you also need an additional validation), you should validate the entire form, instead of each element. In that case, you could inject the validation in the root component (or the component that owns the form), like this:
import { Validation } from 'aurelia-validation';
import { bindable, inject } from 'aurelia-framework';
#inject(Validation)
export class App {
val1 = 0;
val2 = 1;
val3 = 2;
resulttext = "";
constructor(validation) {
this.validation = validation.on(this)
.ensure('val1')
.isNotEmpty()
.isGreaterThan(0)
.ensure('val2')
.isNotEmpty()
.isGreaterThan(0)
.ensure('val3')
.isNotEmpty()
.isGreaterThan(0);
//some additional validation here
}
validate() {
this.validation.validate()
.then(() => this.resulttext = "valid")
.catch(() => this.resulttext = "not valid");
}
}
View:
<template>
<require from="validated-input"></require>
<form submit.delegate="validate()" validation.bind="validation">
<validated-input wert.two-way="val1"></validated-input>
<validated-input wert.two-way="val2"></validated-input>
<validated-input wert.two-way="val3"></validated-input>
<button type="submit" class="btn btn-default">validate</button>
</form>
<div>${resulttext}</div>
</template>
Now, you can re-use the validated-input component in other places. And of course, you probably have to rename it, because the name validated-input does not make sense in this case.
Here is the plunker example https://plnkr.co/edit/gd9S2y?p=preview
Another approach would be pushing all the validation objects into an array and then calling a function to validate all validations objects, but that sounds strange to me.
Hope it helps!