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?
Related
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
Currently, when I have a v-for loop like this:
<li v-for="record in records">
<my-vue-list-item :vue-title="record.title"></my-vue-list-item>
</li>
and I update the data driving the v-for (i.e. assign a new value to records), it doesn't actually create new list items based on the new data. It just updates some of the properties on the list item components components.
Here is a JSFiddle illustrating what I'm talking about. Try expanding one of the buttons (e.g. click "Expand Apple"), then click on "Set 2" to see that even when the list items switch, the component stays expanded.
What's the recommended way of getting around this behavior? I want each new list item (when the data is swapped out) to appear like new. (In the fiddle example, which I load a new set, it should not be already expanded.)
You need to let the Vue components know that the item is different. As far as they know, they're still rendering the same element index from the same list.
You can do this by specifying the key in your v-for iterator...
<li v-for="item in items" :key="item">
https://jsfiddle.net/ahxf44jk/21/
Hi I want to hold element references in files somewhere. and then in run time search for elements withing referenced elements in Selenium how to do that.
For example- a Frame contains multiple text boxes -and multiple frames of similar properties exist where the textboxes are also duplicate. Something like I wanna reference the text box under a particular frame. But i wanna predefine the frame. and the specify that search under that frame[Something like Aliases in Testcomplete]
For Example - similar concept exist in Cheezy's Page-Objects. but not quite.
if you have a structure like this:
<div class='some class'>
<input class='input-button' value='submit'>Submit</input>
</div>
<div class='some class2'>
<input class='input-button' value='submit'>Submit</input>
</div>
and you want to find the first 'Submit' which is within the 'some class' div, you can do this:
parent_element = driver.find_element(:xpath, "//div[#class='some class']")
child_element = parent_element.find_element(:xpath, ".//input")
p.s. this is ruby code.
I have created a TitlePane and wish to load data dynamically from a get method into the Title property. As of the current this all works. However, now when the data is loaded (4 separate types), its all getting mushed together. I wish to divide this received data evenly (25%) across the title.
For example:
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
In this example the title is set to "I'm a TitlePane Too".
I wish to change the title so that each of the four words is evenly distributed across the title section of the pane. However there are no extra properties for doing this sort of thing.
Use the "set" method to set the new title.
E.g:-
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
//For this above example, title is replaced as follows in JS
dijit.byId('tp2').set('title','New title');
Update: If this title pane is created dynamically without an ID, then get the widget object using the css query.
dijit.getEnclosingWidget(dojo.query(".dijitTitlePane")[0]).set('title','New title');
dojo.query(".dijitTitlePane") => will give array of all titlepane domNodes. From this chose the one you need. I chose at "0"th index i.e. 1st title pane node in the page.
Then I get the widget object of that domNode and then set the title.
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.