As per documentation in Element UI - datetime-picker it is possible to set "editable" property to whole datetime-picker control.
But I want to set "editable" property to false to the textbox control inside datetime-picker when someone click on the control
How can I stop user to not edit the textbox inside date-picker control?
For e.g.
<el-date-picker
v-model="defaultValue"
type="datetimerange"
:picker-options="monthlyOptions"
:value-format="valueFormat"
format="MM/dd/yyyy"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:disabled="disabled"
align="center"
:editable="false">
</el-date-picker>
Related
I have a form which includes some hidden and visible elements inside of it and I want to submit some of the elements without validating the hidden ones. At the top of my form there are three radio buttons and they control my form elements. When radiobutton1 selected, some of my form elements become visible and when another radio button is selected, there are some other form elements are visible and some of them are hidden. My question is how am I going to submit my form elements if only they are visible? All of the inputs should be in a single form so I am not allowed to separate them into different forms or different components. What I need to do is when I click the submit button of my form, the form should only submit the visible elements, and it shouldn't send me any error because I left some of the inputs empty (the hidden ones).
I also use Vuedalite so I couldn't figure out how to handle this problem. All of the input fields in the form has the required rule but this rule should be active ONLY IF THEY ARE VISIBLE.
Here is a little code.
<form #submit.prevent="submitForm">
<!-- Content Section -->
<div v-show="showContent">
<!-- Name Field-->
<div>
<div>
<label>Name</label>
<input v-model="name" :class="{'is-invalid' : $v.networkname2GHz.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.name.required && $v.name.$dirty">Name field is required.</small>
</div>
</div>
<!-- Surname -->
<!-- Content Section -->
<div v-show="showContent">
<!-- Surname Field-->
<div>
<div>
<label>Surname </label>
<input v-model="surname" :class="{'is-invalid' : $v.surname.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.surname.required && $v.surname.$dirty">Surnamefield is required.</small>
</div>
</div>
<div show="showContent">
<button type="submit">Save</button>
</div>
</form>
What I want to do is when the user selects the Name radio button only the Name field of the form will be visible and Surname will be hidden, I've done that, no problem. But how do I submit only the name field when surname still empty and has the required rule?
You can use v-if instead of v-show.
The main difference between the two is that, v-if - Only renders the element to the DOM if the expression passes. v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
I have a Vue application that is using Vuetify. For some reason the v-chip component is not re-rendering when the binded value is changed.
<v-data-table>
<template v-slot:item.active="{ item }">
<v-edit-dialog :return-value.sync="item.active">
<v-chip :key="item.active" outlined :color="item.active ? 'success' : 'error'">{{ item.active ? "Open" : "Closed" }}</v-chip>
<template v-slot:input>
<v-switch
#change="saveRowField(item.id, 'active', item.active)"
v-model="item.active"
:true-value="1" :false-value="0"
color="success" label="Open"
></v-switch>
</template>
</v-edit-dialog>
</template>
</v-data-table>
The v-switch in the v-edit-dialog correctly updates the binded field item.active. However the v-chip component inside the template does not rerender on state change.
The :key attribute is binded to the same field as the v-switch.
Why is the v-chip not re-rendering when the value binded to the key is changed?
Tried your code and re-rendering content of v-chip is not an issue. What I see is chip is changed once I click v-switch but when v-edit-dialog is closed, the original value is restored.
So the problem is in v-edit-dialog. If you put large prop on it, it will display buttons - "Save" and "Cancel". If you use "Save" button, the value is saved. If "Cancel", original value is restored.
Without buttons, only way to close the dialog is clicking "away", which is interpreted as "Cancel" by v-edit-dialog and thus original value is restored...
Possible solutions:
Either let user use "Save"/"Cancel" buttons to confirm/cancel editing
Or remove :return-value.sync="item.active" (responsible for this Save/Cancel behavior).
Demo
I'm trying to customize an out-of-the-box form in Vue.js where inputs are shown/hidden depending on the selection of 2 radio buttons:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I have defined isOperator in the data (am I defining data correctly? I'm trying to modify the out-of-the-box code, not sure what this means):
export default {
name: 'User-Details',
components: {...},
props: {...},
data () {
let data = {
...
isOperator: true,
...
};
and I'm trying to make this show/hide a button and input fields. I'm starting with the button as it seems simpler:
<b-button v-show="isOperator === true" #click="save" :block="true" size="lg" variant="primary" active-class="ssrv-form-button" class="ssrv-form-button">
{{$t("common.form.signUp")}}
</b-button>
My current problem, is the button isn't showing/hiding based on the two radio buttons. If I make isOperator: true in the data, the page loads with the 2nd radio button selected and the button showing. When I click the second radio button, it disappears. But then when I click the original radio button again, the button doesn't show back up. I get the same result when I try to show/hide an input field, I can get it to show initially by setting isOperator to true, but then when I select the other radio button to make it disappear I can't make it appear again. If isOperator is set to false, it just never shows.
I put a isOperator is {{ isOperator }} p element and I can see the value is change true/false as expected, but the buttons/inputs aren't showing back up.
From my very limited understanding of Vue.js, I set the v-model to a variable I want an element to modify, and the value what that variable will be set to when the radio button is selected. Then on a separate element I want to show/hide, I can use v-if/v-show with "myvalue === true/false" to show/hide. Is this an oversimplification and I'm missing steps?
That's because of a mismatch in the type of isOperator property. When you first mount the component the value of isOperator is a boolean (true), and then later on when you click on the radio buttons it becomes a string. You need to adjust the value property in your template as below:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" :value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" :value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I'm using Vue with Vuetify and currently have a form with a group of radio buttons:
<v-radio-group label="Active?">
<v-radio name="active" label="No" value="0" v-bind:checked="active === 0"></v-radio>
<v-radio name="active" label="Yes" value="1" v-bind:checked="active === 1"></v-radio>
</v-radio-group>
On page load, active set to 1:
data: {
active: 1
}
I see the input has checked="checked" but the icon remains as "radio_button_unchecked" so doesn't appear to be checked:
<input aria-label="Yes" aria-checked="false" role="radio"
type="radio" value="1" name="active" checked="checked">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>
Image of vuetify radio button unchecked
If I click the radio button, it changes the icon to radio_button_checked, but on page load that doesn't seem to be happening. How can I get vuetify to load with radio_button_checked if the input it's associated with is checked?
The <v-radio> element does not support a "checked" attribute like <input type="radio"> does. Instead, the currently checked radio button is managed by the <v-radio-group> wrapper.
The following code should work:
<v-radio-group label="Active?" v-model="active">
<v-radio name="active" label="No" :value="0"></v-radio>
<v-radio name="active" label="Yes" :value="1"></v-radio>
</v-radio-group>
According to the Vuetify docs all selection components must include a v-model prop, in this case, v-model="active". The radio group will then have it's value dependant on the "active" variable in your data. If the "active" value equals one of the :value="..." props in the <v-radio> elements, that element will be checked. See also this codepen.
Don't forget to append a : before your value prop or it won't be bound by Vue.
I came across an instance where the v-model solution just wouldn't work with what I was trying to accomplish. I came up with the following work around using the off-icon prop:
<v-radio
:off-icon="item.active ? '$radioOn' : '$radioOff'"
/>
I would need a good way to verify error icon is shown for mandatory form fields when submitted with empty input using selenium 3 webdriverjs.
Below is part of DOM trace when error is thrown if mandatory field is left blank & form is submitted.
<div class="col-md-8 col-sm-8 col-xs-8 " style="display: inherit;">
<div class="vx_floatingLabel_complex vx_floatingLabel_active vx_has-
error-with-message ">
<label for="testerAccountData_phone">Telefone</label><div
class="vx_form-control" data-label-content="Telefonnummer" style="">
<input type="tel" maxlength="20" value="" autocomplete="off"
name="/testerAccountData/phoneNumber" id="testerAccountData_phone">
</div><span class="vx_form-control-error-icon icon icon-small icon-
critical-small"></span><span></span><span></span></div></div>
I am looking at validating multiple fields in the form,
Q: how do I use selenium to check if error icon appears for the field. i'm not sure if i can use getAttribute function, as error icon seems to be part of CSS element?
=> class="vx_form-control-error-icon icon icon-small icon-critical-small">
Once you confirm that you can select the element. Selenium has the element.isDisplayed() api that can help you determine if the element is visible
http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebElement.html
https://github.com/SeleniumHQ/selenium/blob/master/javascript/node/selenium-webdriver/lib/webdriver.js#L2160
//untested code:
driver.findElement(By.className('vx_form-control-error-icon')).isDisplayed();