I have a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute.
Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false
<select #change="onChange" ...
<input type="checkbox" :checked="checked()" ...
The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice
To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:
<input type="checkbox" :checked="checked" ...
So your checked function shouldn't have parens on it.
If that's not the issue, please post the rest of your component so we can see the script and data values.
Agreed with #DRich here but you can use #input method to call a method
<select #input="onChange" ...
I use this most of the time
Related
I have an array of activities that looks like this:
[
{id: 'd0a503f0-be2b-453c-8f6e-d5a734bbba33, name: 'Baseball'}
{id: 'd0a503f0..., name: 'Soccer'}
...
]
I am looping through each activity to render a list of checkbox options like this:
<div v-for="activity in activities" :key="activity.id">
<input :id="`activity-${activity.id}`"
v-model="$v.resource.activities.$model" name="activities" :value="activity.id" />
<label>{{ activity.name }}</label>
</div>
So far, things work great. The checkbox group renders with the correct value(s). I am able to check the ones I want and when I save my form, I am saving an array of activity id's.
When I edit the resource, the checkboxes are not being pre-populated (checked). I am struggling to understand how to loop through each of the array elements in vuelidate's $v.model.
Let's say I have 4 activities total. Here is what the $v.resource.activities attribute looks like in my devtools toolbar (2 activities have been previously selected):
$v:Object
resource
activities:Object
$anyDirty:false
$anyError:false
$dirty:false
$error:false
$invalid:false
$model:Array[2]
0:Object
createdAt:"2023-02-04T08:55:27.009Z"
id:"d0a503f0-be2b-453c-8f6e-d5a734bbba33"
name:"Baseball"
updatedAt:"2023-02-05T23:17:00.206Z"
1:Object
createdAt:"2023-02-05T23:19:49.938Z"
id:"c251e931-2a8a-468c-aff4-b4250233cfa6"
name:"Soccer"
updatedAt:"2023-02-05T23:19:49.938Z"
I know I need to keep the initial loop like I have above to generate the list of checkboxes. I am confused as to how to also loop through each of the $model attributes to see if the checkbox should be checked or not.
Since the value of the checkboxes are only the id of the activity, I don't think it knows what to do (which is understandable). How can I loop through the list of activities and correctly populate which checkbox has been selected?
I have a page with multiple textboxes and dropdowns with values that I am trying to validate. The values in them will be dynamic in each run.
The HTML looks something like:
<input readonly="readonly" class="form-control valid" data-val="true" data="ABC" aria-invalid="false" xpath="1">
What I want to do is grab the value of "data" for each textbox. I have used scriptAll before in such a case when I was grabbing text by using innerText. However, that won't work with a regular value such as in the HTML above.
I did try one solution that worked:
driver.value(//input[#data])
However, that just grabs the first textbox value, is there a way I can combine scriptAll with driver.value? OR would I be better off doing some JS here?
Thank you in advance!
Yes, refer the docs for scriptAll(): https://github.com/karatelabs/karate/tree/master/karate-core#scriptall
Use whatever JS works to get an attribute value. Haven't tried, but this should work, you get the idea:
* def list = scriptAll('input', "_.getAttribute('data')")
I am editing a vue for a project that I am working on. Below is my code
<tr v-for="(program, index) in selectedGantryLocation.pickPrograms">
<v-select :items="program"
:v-model="selectedGantryLocation.pickProgramValues[index]">
</v-select>
</tr>
The selectedGantryLocation.pickPrograms is a list of a list of strings. So each "program" that is being used in the iteration is an array of strings, it is nothing more and nothing less. The array generally looks like ["Program1","Program2","Program3" etc.]. The :items are being populated correctly and are displayed correctly in the dropdown.
Now because in this vue each dropdown will already have a previously selected value that I am grabbing from the backend, I need each dropdown to show the already selected value. selectedGantryLocation.pickProgramValues[index] is indexing a list of strings, each being the default value of each v-select that is created.
For some reason the v-model is not showing any default values. I have verified that the selectedGantryLocation.pickProgramValues is indeed populated and filled with strings. Is there an issue with assigning v-model to a string? If that is the case then I do not know how to go about fixing this issue as I have no more properties to reference because I am only working with lists of strings.
I also know that this won't work if the v-model value does not exist in the :items but I have also verified that it does exist here so that should not be an issue.
If anyone has any ideas of why my v-selects do not have any default values I would appreciate your feedback, thank you!
I have a select element on my form. I fill its contents with javascript. The view model has a property called Fruits of type IEnumerable. Is it possible to bind this select to that property when I submit the form? So to make it clear, assume there's a form with a select of size 5, which at the same time is empty. Then I add some items (options) to that select with java script:
<select size="5">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
<option value="4">Pinapple</option>
</select>
When I submit the form, I want the Fruits property to contain the above option values. How's that done? I can't think of any way to do it.
Finally found it, something's missing though. To overcome the first problem of getting an empty ListBox on the view I did this:
ListBoxFor(x=>x.Fruits,new List<SelectListItem>(),new{style="width:160px;display:block"})
This will bring up an empty <select multiple="multiple" size="5" name="Fruits"> to the view. Then I add some items to the listbox with javascript (to be precise, add options to the select). The biggest pain started after this. When submitting the form the Fruits property was null, so listbox items were not getting bound. After lots of digging I discovered that in order for a ListBox items to bind to some collection the desired ones need to be selected. So even if there're 10 items in the listbox, they won't get bound to my Fruits model property unless I select them before submitting. After selecting the added items the Fruits property contained the corresponding values. However I hate to have to select all the items after adding them. I know this can be done automatically with javascript, but it'd be good to bypass this by some other means.
I have the following code:
<input type="text" dojoType="dijit.form.NumberTextBox" size=8
constraints="{min:0,max:100000,places:0}"
id="orgNumberOfStudents" name="orgNumberOfStudents"
required="true" invalidMessage="Integer between 0 and 100,000"
value="">
Questions:
1) How do I set the width of the box? Do I have to do it in a style tag or a CSS? Is the traditional "input size" tag ignored?
2) The above sample shows the error when I type in a non-numeric value. But if I tab over the field and don't fill in anything, it's still blank. Is there a quick way to enforce the validation when I click the submit button? Do I need a Dijit submitt button? Do I need to write more JavaScript to make this happen? How does the required="true" actually occur?
(One get-around is to set the value to 0, but I'd rather force the user enter a value rather than just defaulting it).
Thanks,
Neal Walters
You should be able to use both CSS and traditional INPUT attributes like "maxLength" on your NumberTextBox by passing them in to the Widget's constructor. maxLength is available on all dijit.form.TextBox subclasses, but is probably less useful here since you have control over things like min/max and the actual number format.
Yes, you can always write your own JS to test "isValid()" on your widget instance before submission, e.g. in an HTML FORM onSubmit handler, or you could use dijit.form.Form which will check validity for you. The widget itself is only responsible for visual representation of its own validity, according to the options chosen.
HTH