I am trying to check if an input A is bigger than input B and if this happens disable the button and if it's not enable
Html:
<input v-model="form.a" />
<input v-model="form.b" />
<button :class="{disabled: btnDisabled}">Enviar</button>
VueJs:
<script>
import { required, minLength } from 'vuelidate/lib/validators';
export default {
created() {
},
data: function() {
return {
btnDisabled: false,
form: {
a: '',
b: ''
}
}
},
methods: {
checkEndBillNumber() {
if(this.form.a > this.form.b) {
// I do not know what I should put here
}
else {
// I do not know what I should put here
}
}
}
}
</script>
If you see I do not know what I should and in the vuejs conditional to disable the button if the conditional is true or false.
How can I do that? Thanks!
disabled attribute in buttons get true or false so you can do something like this:
<input v-model="form.a" />
<input v-model="form.b" />
<button :disabled="isDisabled">Enviar</button>
computed: {
isDisabled() {
const result = this.form.a > this.form.b ? true : false;
return result;
}
}
or if you want to add a class you can do this:
<button :class="{ 'yourClassName': isDisabled }">Enviar</button>
Related
I have a basic input component I am working with that has type as a property and up until now has been working very well. However, trying to use it for passwords and implementing obfuscation has been sort of tricky.
How can I toggle hide/show of the password without mutating the prop? I figured making it type = 'password' to type = 'text was the best way, but clearly not.
I've made a Codesandbox to replicate that part of the component, but any advice or direction would be greatly appreciated!
PasswordInput.vue:
<template>
<div>
<input :type="type" />
<button #click="obfuscateToggle" class="ml-auto pl-sm _eye">
<div>
<img :src="`/${eyeSvg}.svg`" alt="" />
</div>
</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
passwordVisible: false,
eyeSvg: "eye-closed",
};
},
props: {
type: { type: String, default: "text" },
},
methods: {
obfuscateToggle() {
if (this.eyeSvg === "eye-closed") {
this.eyeSvg = "eye";
} else this.eyeSvg = "eye-closed";
// this.eyeSvg = "eye-closed" ? "" : (this.eyeSvg = "eye");
if ((this.type = "password")) {
this.type = "text";
} else this.type = "password";
},
},
};
</script>
App.vue
<template>
<div id="app">
<PasswordInput type="password" />
</div>
</template>
The only way to do it is by mutating the type attribute. As that is how the browser decides the render it as either just a textbox or as a password. Therefore you are doing this the right way.
The one issue that you will encounter is that you will have errors thrown in your console because you are attempting to mutate a prop.
This is quick and easy to fix. First, you will create a new data property, and assign it to the default of type
data(){
return{
fieldType:'text'
}
}
Then you will use the on mounted lifecycle hook, and update your data property to match your prop's value`
mounted(){
this.fieldType = this.type;
}
If you know the type prop will change from the parent component you can also use a watcher for changes and assign type
watch:{
type(val){
this.fieldType = val;
}
}
You will then update your obfuscateToggle method to use the fieldtype variable:
obfuscateToggle() {
if (this.eyeSvg === "eye-closed") {
this.eyeSvg = "eye";
} else this.eyeSvg = "eye-closed";
//You can simplify this by using this.fieldType = this.fieldType == "text" ? "password" : "text"
if (this.fieldType == "password") {
this.fieldType = "text";
} else this.fieldType = "password";
}
Finally, in your template, you will want to change type to fieldType
<template>
<div>
<input :type="fieldType" />
<button #click="obfuscateToggle" class="ml-auto pl-sm _eye">
<div>
<img :src="`/${eyeSvg}.svg`" alt="" />
</div>
</button>
</div>
</template>
Putting it all together
<script>
export default {
name: "HelloWorld",
data() {
return {
passwordVisible: false,
eyeSvg: "eye-closed",
fieldType: "text"
};
},
props: {
type: { type: String, default: "text" },
},
methods: {
obfuscateToggle() {
if (this.eyeSvg === "eye-closed") {
this.eyeSvg = "eye";
} else this.eyeSvg = "eye-closed";
//You can simplify this by using this.fieldType = this.fieldType == "text" ? "password" : "text"
if (this.fieldType == "password") {
this.fieldType = "text";
} else this.fieldType = "password";
},
},
watch:{
type(val){
this.fieldType = val;
}
},
mounted(){
this.fieldType = this.type;
},
};
</script>
Here is an example on CodeSandBox
Also, you had a small typo in your obfuscateToggle method.
if(this.type = 'password')
this was assigning type instead of comparing it against a literal :)
I have a complex modal that I've put in it's own component. It works on a copy of the passed model, to allow the user to cancel the action.
<template>
<b-modal
v-if="itemCopy"
v-model="shown"
#cancel="$emit('input', null)"
#ok="$emit('input', itemCopy)"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
props: {
value: Object
},
data() {
return {
shown: false,
itemCopy: null
};
},
watch: {
value(itemToDisplay) {
this.shown = !!itemToDisplay;
this.initValue();
},
item(it) {
this.initValue();
}
},
methods: {
initValue() {
this.itemCopy = _.cloneDeep(this.value);
}
}
};
</script>
The Idea to communicate with it is to pass an object in the v-model and, if set, the modal will be shown using that data, and when done, the new state will be communicated back over the v-model as well.
That is, if the user cancel/closed the modal, the v-modal variable will be null, otherwise it will be a new Model that will replace the one in v-modal.
<template>
<!-- omitted for brevity -->
<ItemModal v-model="modalItem" />
<template>
<script>
//...
export default {
data() {
return {
itemNumber: null
};
},
computed: {
modalItem:{
get() {
if (this.itemNumber != null) return this.entries[this.itemNumber];
},
set(newItem) {
if (newItem && this.itemNumber) {
//splice, etc.
}
// in any clase reset the selection to close the modal
this.itemNumber = null;
}
},
//...
<script>
The Problem I have is with the events from b-modal. I can use the #ok but there's no #notOk.
For example #cancel won't be thrown if the user click outside of the modal.
How can this be achieved? Is there another more easier way of doing this?
b-modal emits a generic hide event, which receives as its first argument the trigger that closed the modal (i.e. ok, cancel, esc, backdrop, etc):
<template>
<b-modal
v-if="itemCopy"
v-model="shown"
#hide="handleHide"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
// ...
methods: {
// ...
handleHide(bvEvt) {
if (bvEvt.trigger === 'ok') {
// User clicked OK button
this.$emit('input', this.itemCopy)
} else {
// The modal was closed not via the `ok` button
this.$emit('input', null)
}
}
}
};
</script>
<template>
<b-modal
:id="id"
#ok="$emit('ok', item)"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
props: {
item: Object,
id: String
}
};
</script>
<template>
<!-- omitted for brevity -->
<ItemModal :item="modalItem" :id="modalId" #ok="onModalOk" />
<template>
<script>
//...
export default {
data() {
return {
modalId: "myItemModal"
itemNumber: null
modalItem: null
};
},
methods: {
showItemModal(itemNumber) {
this.itemNumber = itemNumber
this.modalItem = _.cloneDeep(this.entries[itemNumber])
this.$bvModal.show(this.modalId)
},
onModalOk(newItem) {
if (newItem && this.itemNumber) {
//splice, etc.
}
}
}
//...
<script>
I'm going to build a customized virtual keyboard, so that's the first problem I've encountered.
I have an input element, whose value is changed from outside, in my case by pressing a button. The problem is that there seems to be no way to trigger the normal 'change' event.
Neither clicking outside the input, nor pressing Enter gives any result. What might be the correct way of solving this problem?
<template>
<div class="app-input">
<input #change="onChange" type="text" v-model="value" ref="input">
<button #click="onClick">A</button>
</div>
</template>
<script>
export default {
name: "AppInput",
data() {
return {
inputDiv: null,
value: ""
};
},
props: {
msg: String
},
methods: {
onClick() {
this.value = this.value + "A";
this.inputDiv.focus();
},
onChange() {
alert("changed");
}
},
mounted() {
this.$nextTick(() => {
this.inputDiv = this.$refs.input;
});
}
};
</script>
The whole pen can be found here.
v-on:change would only trigger on a direct change on the input element from a user action.
What you are looking for is a wathcer for your data property, whenever your value changes, watcher will execute your desired function or task.
watch: {
value: function() {
this.onChange();
}
}
The watch syntax is elaborated on the provided official vuejs docs link. use your data property as the key and provide a function as a value.
Check the snippet.
export default {
name: "AppInput",
data() {
return {
inputDiv: null,
value: ""
};
},
props: {
msg: String
},
methods: {
onClick() {
this.value = this.value + "A";
this.inputDiv.focus();
},
onChange() {
alert("changed");
}
},
// this one:
watch: {
value: function() {
this.onChange();
}
},
// --- rest of your code;
mounted() {
this.$nextTick(() => {
this.inputDiv = this.$refs.input;
});
}
};
When I build any new vue application, I like to use these events for a search input or for other inputs where I don't want to fire any functions on #change
<div class="class">
<input v-model="searchText" #keyup.esc="clearAll()" #keyup.enter="getData()" autofocus type="text" placeholder="Start Typing ..."/>
<button #click="getData()"><i class="fas fa-search fa-lg"></i></button>
</div>
These will provide a better user experience in my opinion.
I'm coding a custom validation form component using ant-design-vue
I have changed my code nearly same as the example showed on the official website, but still got warning, the only difference is the example use template to define child component, but I use single vue file
//parent component
...some other code
<a-form-item
label="account"
>
<ReceiverAccount
v-decorator="[
'receiverAccount',
{
initialValue: step.receiverAccount,
rules: [
{
required: true,
message: 'need account',
}
]
}
]"
/>
</a-form-item>
...some other code
//child component
<template>
<a-input-group compact>
<a-select
:value="type"
#change="handleTypeChange"
>
<a-select-option value="alipay">alipay</a-select-option>
<a-select-option value="bank">bank</a-select-option>
</a-select>
<a-input
:value="number"
#change="handleNumberChange"
/>
</a-input-group>
</template>
<script>
export default {
props: {
value: {
type: Object,
default: () => {}
}
},
data() {
const { type, number } = this.value
return {
type: type || 'alipay',
number: number || ''
}
},
watch: {
value(val = {}) {
this.type = val.type || 'alipay'
this.number = val.number || ''
}
},
methods: {
handleTypeChange(val) {
this.triggerChange({ val })
},
handleNumberChange(e) {
const number = parseInt(e.target.value || 0, 10)
if (isNaN(number)) {
return
}
this.triggerChange({ number })
},
triggerChange(changedValue) {
this.$emit('change', Object.assign({}, this.$data, changedValue))
}
}
}
</script>
I expect everything is fine, but the actual is I got 'Warning: getFieldDecorator will override value, so please don't set value and v-model directly and use setFieldsValue to set it.'
How can I fix it? Thanks in advance
because I am new of ant-design-vue, after one day research, solution is change :value to v-model and remove value props in the child component
<template>
<a-input-group compact>
<a-select
v-model="type"
#change="handleTypeChange"
>
<a-select-option value="alipay">alipay</a-select-option>
<a-select-option value="bank">bank</a-select-option>
</a-select>
<a-input
v-model="number"
#change="handleNumberChange"
/>
</a-input-group>
</template>
I want to activate a class for each input individually. I have two inputs bound to the same v-model and class. I have a method that checks for something to be true, and if true enables the bound class. Currently it enables the class on all inputs. (The end goal is to search multiple inputs for an element within an array and if it matches, the class activates only for that element)
<input v-model="highlightTest" id="1" v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>
<input v-model="highlightTest" id="2" v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input>
Highlighting: function() {
if (this.highlightTest != '') {
this.active = true;
}
else {
this.active = false;
}
How about this:
<template>
<input v-for="(hi,index) of highlights" v-model="highlights[]" v-bind:class="{ active: highlights[index] }" v-on:keyup="highlighting(index)"></input>
</template>
<script>
export default{
data() {
return {
highlights: []
};
},
created() {
this.$http.get('some/api').then(res => {
// map: convert 0,1 to false,true
this.highlights = res.json().map(h => h==1);
});
},
methods: {
highlighting(index) {
if (this.highlights[index]) {
// this.highlights[index] = false won't let vue detect the data change(thus no view change)
this.highlights.splice(index, 1, false);
} else {
this.highlights.splice(index, 1, true);
}
}
}
}
</script>
Here's one way to do it (sorry for the delay btw)
HTML:
<div id="app">
<p :class="{'active': activateWord(word)}" v-for="word in words">#{{ word }}</p>
<input type="text" v-model="inputText">
</div>
CSS:
.active {
color: red;
}
JS:
const app = new Vue({
el: '#app',
data: {
inputText: '',
words: [
'foo',
'bar'
]
},
methods: {
activateWord(word) {
return this.inputText === word
},
},
})
here's a fiddle