Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm new to Vue! I want to build a simple select field with value:
"0" => "No age limit", 6 ->90
So, I would like to build 6 to 90 with a v-for, but I don't know exactly how to do it, and still to have the initial "no age limit"
Any idea how to do it???
It shoud be something like this:
<body>
<select>
<option value="0">No age limit</option>
<option :value="n+6" v-for="n in 85">{{n+6}}</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<script>
new Vue({
el: 'body'
})
</script>
</body>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
how do you input 2 props in one line in VUEJS?
Im using vuejs 2 and element UI.
<el-table-column prop="`(creator_name + creator_username)`" label="Founder"></el-table-column>
The output should be
test(09123567)
in Vue, you can passing the variable as props with colon as prefix
in your case:
<el-table-column :prop="`${creator_name} ${creator_username})`" label="Founder"></el-table-column>
in Vue you have to put : before a property to dynamically assign value to it. in your case it should be
<el-table-column :prop="creator_name + creator_username" label="Founder"></el-table-column>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Is it better practice to pass in the event when using it in a method or to just have it implied:
option1:
<input #keyup.enter="chooseMe($event)"/>
option2:
<input #keyup.enter="chooseMe"/>
chooseMe(evt) {
console.log(evt)
}
I'll assume that you are asking about performance rather than developer opinion. (For example, it could be argued that explicitly passing the $event argument makes the component's intention clearer, but that's an opinion. It's also more verbose.)
The compiler generates a wrapper function around any handler that uses a function invocation (i.e. () in the attribute value), to allow for passing $event as an argument. When using modifiers like .enter in your example, it does this even if there is no invocation.
To test any performance impact, you can use a test suite like JSBench.me. Here are the results of such a test running on Windows/Chrome.
Implicit
<div #click="test"></div>
Result:: ~502,653 operations per second.
Explicit
<div #click="test($event)"></div>
Result:: ~536,685 operations per second.
It's faster (by an imperceptible margin) to include the $event in this case. But the difference is insignificant enough to be irrelevant. If you had to compile 500,000 event handlers, the act of compilation for both syntaxes would take around 1 second.
In Option1 you create an expression each time the component gets rendered. But, in Option2 in each cycle, just one method is addressed. So, it's better to define methods and address them in the template.
Consider this sample:
<list>
<li
v-for="item in items" :key="item.id"
#click="theClickHandler(item)"
></li>
</list>
There are a theClickHandler method and item.length different expressions in each render (at most)!!
To handle this situation you can use HTML data attributes:
<list>
<li
v-for="item in items" :key="item.id"
:data-id="item.id"
#click="theClickHandler"
></li>
</list>
and get the clicked item in hanlder method:
theClickHandler(e) {
const id = e.target.dataset.id
const [item] = this.items.filter(x => x.id === id)
console.log('clicked item:', item)
},
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I provided below HTML code snippets can you help me how to write a test case using html web element "searchInput".
This my HTML Elements:
<div _ngcontent-c5="" class="input-group input-group-lg">
<input _ngcontent-c5="" class="form-control ng-valid ng-dirty ng touched" formcontrolname="searchInput" name="searchInput" placeholder="Please search here...?" type="text" ng-reflect-name="searchInput">
<div _ngcontent-c5="" class="input-group-append">
<button _ngcontent-c5="" class="btn btn-bxc-black px-2"type="submit">
<mat-icon _ngcontent-c5="" class="mat-icon material-icons" role="img" aria-hidden="true">search</mat-icon>
</button></div></div>
${search_box}= Get Element Attribute css=[name="searchInput"] value
or
${search_box}= Get Element Attribute css=[name="searchInput"]#value
have you tried this?
You need to import selenium2Library fir this.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Refer this firepath :
.//*[#id='gwt-uid-20138']
HTML :
<input id="gwt-uid-20138" type="checkbox" value="on" tabindex="0">
Note: this id value gets changed.
If id is changing, maybe try to find checkbox using label next to this checkbox?
Try something like this:
/label[text()="test"]/preceding-sibling::input
If selector of your checkbox keeps on changing you need to identify it with the property which is always constant and unique.
From your example you can see that gwt-uid- part is always constant, you can use the same to identify the element.
driver.findElement(By.xpath("//input[starts-with(#id, 'gwt-uid-')]"));
To find the checkbox element you have to take help of the id attribute. But as you can see the id attribute is dynamic, so we have to make our Locator Strategy dynamic. Now if you observe the id attribute closely you will observe that the gwt-uid- part is constant and only the remaining part i.e. 20138 is dynamic. So we can use the starts-with() method for the dynamic id and to identify the checkbox uniquely we will also include the type attribute while constructing the locator. So to find the checkbox element you can use the following line of code :
Java :
WebElement element = driver.findElement(By.xpath("//input[starts-with(#id,'gwt-uid-') and #type='checkbox']"));
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
<input id="actionQty_8445901" style="position:absolute" onclick="AddMeToCart(this)" type="checkbox">
select multiple check box
<input id="actionQty_8445901" style="position:absolute" onclick="AddMeToCart(this)" type="checkbox">
'//input[starts-with(#id,'actionQty_')][1]'
am trying this but its working for one check box only
You can use this xpath to select multiple checkboxes
//input[contains(#id,'actionQty')]
and also use findElements() method to select it
List<WebElement> checkElements= driver.findElements(By.xpath("//input[contains(#id,'actionQty')]"));
for (WebElement check_elem: checkElements) {
check_elem.click();
}
Xpath of the element will be like
//input[starts-with(#id, 'actionQty_')]
then you need to find number of checkbox and click element withinloop
Then you can get all the checkbox
List<WebElement> allElements = driver.findElements(By.xpath(" //input[starts-with(#id, 'actionQty_')]"));
for (WebElement element: allElements) {
element.click();
//do your operation
}
Hope it will work