I am trying to increment an array value inside a value.bind directive so that, in this example, three rows are created, incrementing the array number:
<tr repeat.for="i of 3">
<td><input type="text" value.bind="GS.qData.estate[**${$index}**].name"></td>
**strong text**</tr>
I have tried several permutations ( {$i}, etc ), but nothing seems to work.
Further research seems to show that the repeater won't do this, so I have other solutions.
Thanks for the reply.
Related
Consider sample below:
//edit.html
<input type="number" step="1" value.bind="number" />
<div repeat.for="num of number">${num}</div>
//edit.ts
export class Edit {
number: number = 2;
}
I expect to see 2 divs on first page load and number of divs should change when I change number in input. Instead I get error
Value for 'number' is non-repeatable
I figured it out. If you bind input field to variable, even when variable is number, it will be changed to string when changed by user. In my case, number became string once changed in input field. I used this gist to help me solve this problem:
https://gist.github.com/jdanyow/d9d8dd9df7be2dd2f59077bad3bfb399
It offers custom element and attribute for binding numbers to input fields.
The problem
In Vue, I'm passing an array called issues. The array contains (at present) two objects, but can contain infinite amounts of objects. Every object then has another array named issues, nested inside of it.
The issue is that when I need to display the data, I find that I can't seem to reach the inner "issues" section of it.
I can loop through the first array like so:
<tr v-for="issue in issues" track-by="id">
But that only lets me see the first two objects. I then tried:
<tr v-for="issue in issues" track-by="id">
<td>
<div class="btn-table-align" v-for="issue_title in issue.issues">
#{{ issue_title.title }}
</div>
</td>
</tr>
Which lets me access the sub-elements, but doesn't generate enough rows. I then tried looping over it AGAIN, like so:
<div v-for="first in issues" track-by="id">
<tr v-for="issue in first" track-by="id">
<td>
<div class="btn-table-align">
#{{ issue.id }}
</div>
</td>
</tr>
</div>
But, alas - it generates no rows at all when I do that.
I'd basically need a way to run a "issue in issues", then another for the results and THEIR direct children. The only issue is - I can't figure out how to do it, and Vue won't respond to any of the above attempts! I find a severe lack of documentation on two-dimensional arrays in Vue as well, which has me confused further.
Can anyone shed some light on this? Is it possible, or do I need to adjust the data sent to Vue differently?
To help, I shot an image of an example structure: http://i.imgur.com/6Oz67R9.png
This was a typical 5am question, where I now realize that the data I'm passing makes no sense - it should be the other way around. The actual issues should be in the first array, and the subarray should contain affected servers.
Here there are a lot of posts for testing dropdown lists which are created using the select and option tags. But even after lot of effort, I could not find even a single post for testing dropdowns created using input tag.
html code :
<input id="CEPJICNK.ProcMgmtView.InstanceAdvancedQueryHitLimitDropDownBK" autocomplete="off" value="10" readonly="true" ct="CB" lsdata="{7:'SVSDK.com.sap.dictionary.string_530_',8:'10',10:'10',12:true}" lsevents="{Select:[{'ClientAction':'submit'},{'urEventName':'COMBOBOXSELECTIONCHANGE'}],Change:[{'ClientAction':'submit'},{'urEventName':'COMBOBOXSELECTIONCHANGE'}]}" tabindex="0" ti="0" class="urEdf2TxtRadius urEdf2TxtEnbl lsEdf3TxtHlpBtn lsEdfLeftBrdRadius lsEdFieldFocus" style="width:100%;"></td><td class="lsTblEdf3HlpBtnTd"><input type="text" readonly="true" id="CEPJICNK.ProcMgmtView.InstanceAdvancedQueryHitLimitDropDownBK-btn" tabindex="-1" ti="-1" class="urBorderBox lsEdf2HlpRadius lsEdf3HlpBtn lsEdf3HlpBtnCoB lsEdf3HlpBtnFocus"></td></tr></tbody></table>
*//Current Values in dropdown are : 10,20,30,40,All*
<tbody><tr ct="ILBI" lsdata="{0:'10',4:'10'}" id="SVSDK.com.sap.dictionary.string_530_-key-0" class="urIlb2ISel"><td class="urIlb2I urColorTxtStandard">10</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'20',4:'20'}" id="SVSDK.com.sap.dictionary.string_530_-key-1" class="">
<td class="urIlb2I urColorTxtStandard">20</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'30',4:'30'}" id="SVSDK.com.sap.dictionary.string_530_-key-2" class=""><td class="urIlb2I urColorTxtStandard">30</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'40',4:'40'}" id="SVSDK.com.sap.dictionary.string_530_-key-3" class=""><td class="urIlb2I urColorTxtStandard">40</td>
<td> </td></tr><tr ct="ILBI" lsdata="{0:'-1',4:'All'}" id="SVSDK.com.sap.dictionary.string_530_-key-4" class=""><td class="urIlb2I urColorTxtStandard">All</td>
<td> </td></tr></tbody></table></div>
Hi #Sumitbit2005 What approach i found is :
1. first get hold of input tag using xpath and its id
2. get lsdata attribute of this element
3. now using string operations, extract the number part
4. now that we have the number, we can access the table by giving full xpath
5. But alas the table is in a <div> tag which is in quotes. Hence the DOM can't access it directly
6. So what I do next is first access the parent element of <div> and then access its innerHTML
7. Finally we need to verify if all the expected values exist in this innerHTML
8. A clean way to do this is to treat this innerHTML as XML and
a. calculated count of values using xpath query
b. check each value using xpath query
We have the same problem. The best approach is to click on the drop down input button (-btn) and have the input box being visible. Than you can find the table in the dom and walk through it programmatically knowing exactly how and what is in it.
You can navigate the combo box by using sendKeys(Keys.ARROW_UP / DOWN) directly but you should always have the table (drop down) visible and use it for moving up and down. Having it not open and just use the input for up down will result in stale references since it appears that the input element is rewritten to the dom every 100 or so ms (no idea whats the js is causing it). Even if we refresh the element (by refinding it) the table starts to do weired stuff even causing it to have no value at all (no value attribute at the given time) or the table starts on first index again even if we were in the middle of the options.
So always have the combo box table visible.
I'm passing models to a handlebars template and putting a few of the properties in a row. I want to have some sort of position variable for each row. Specifically, I want to know how many rows have been created and have a position associated with each row.
e.g.
{{#each row}}
<span class = (indexHere)>
<tr>
<td> <{{this.property}}>
</tr>
</span>
{{/each}}
This is an old question and maybe at that time Handlebars did not include the #index property, but according to current (1.3.0) documentation:
When looping through items in each, you can optionally reference the current loop index via {{#index}}
You make your own helper :-)
Here's one you can steal:
https://gist.github.com/1048968
I'm using Struts2 iterator to setup a list of checkbox in a table. I want to have 10 checkbox per row, so I'm doing the following:
<table>
<tr>
<s:iterator value="securityMasterFields" status="fieldNameStatus" var="fieldName">
<s:if test="#fieldNameStatus.index % 10 ==0">
</tr><tr>
</s:if>
<td>
<s:checkbox name="fieldsToShow" fieldValue="%{fieldName}" value="%{fieldName}"/>
</td>
</s:iterator>
</tr>
</table>
It never goes through the if, so I'm assuming the mod is not been calculated correctly. How do I do it?
thanks
Well, I had to add some parentheses and it worked correctly. The loop was working, it was just that it wasn't going through the if.
<s:if test="(#fieldNameStatus.index % 8 )==0"></tr><tr></s:if>
It looks good to me. Two thoughts:
1) try printing the result of the test in s:property tag
2) It looks like you will have empty table rows... Are you looking at the generated html or just the output, because if it is just the output then unless you have some CSS giving you some table padding and borders, without an empty 'td' element the row might collapse and make it appear as if nothing is being added. So do make sure you print the empty 'td' elements too!