I am trying to get value of data attribute inside component.ts in angular2.
1) form2.component.html
<md-select placeholder = "BedRooms" [formControl]="userForm.controls['bedRooms']" >
<md-option #bedRoom *ngFor="let bedRooms of formSettings?.prices?.pricingParams?.bedRooms" [value] = bedRooms.title [attr.data-price] = bedRooms.price (click)="test(bedRoom)"> {{bedRooms?.title}} </md-option>
</md-select>
How to get value of data-price in test function?
You can access the value of data-price from reference bedRoom as below.
bedRoom.getAttribute('data-price');
Related
I have a table with 3 possible values: Firenze, Roma and Milano.
These 3 values need to be associated to 3 different colours.
On page load, every value should render with its associated colour.
Inline conditional rendering can't be used as it only can hold 2 values.
I've tried using functions such as this one below
($missing_item is a v-for single prop got from $missing_items which is an external array prop)
function getColour($missing_item){
switch($missing_item.Deposito){
case $missing_item.Deposito == 'Firenze':
return 'text-violet-400';
case $missing_item.Deposito == 'Roma':
return 'text-orange-400';
case $missing_item.Deposito == 'Milano':
return 'text-green-400';
}
}
I'm calling the function like this: :class="changeColour()"
but I keep getting the same error:
"Uncaught (in promise) TypeError: Cannot read properties of undefined
(reading 'Deposito')"
.
My main issue at this point is how to access the renderd "$missing_item.Deposito" inside a function
EDIT:
As I understand you try to call your method from a v-for. In this case just add the parameter from the loop:
<div v-for="(missing_item,index) in missing_items" :key="`Item${index}`">
<div :class="changeColour(missing_item)">
I change color depending on which city I am.
</div>
</div>
ORIGINAL ANSWER
There is no need for an additional function, Vue can handle this inside the class binding (see docs).
In your example it could look like this:
<div :class="$missing_item.Deposito == 'Firenze' || $missing_item.Deposito == 'Milano' ? 'text-green-400' : 'text-orange-400'">
{{ $missing_item.Deposito }}
</div>
While this works, the "Vue way" would be to use it in combination with a computed property like this:
<div :class="depositoStyle">
{{ $missing_item.Deposito }}
</div>
computed: {
depositoStyle() {
return this.$missing_item.Deposito == 'Firenze' || this.$missing_item.Deposito == 'Milano' ? 'text-green-400' : 'text-orange-400';
}
}
If you'd rather use a switch case than the short form, you can insert your switch case function into the computed property and return the end result.
How to search in raw instead of foo` in Vuetify Autocomplete ?
<v-autocomplete
v-model="myvar"
:items="myitems"
item-value="foo"
item-text="bar"
/>
myitems: [
{'foo':'aaa', 'bar':'123', 'raw':'hello world'},
{'foo':'bbb', 'bar':'456', 'raw':'good morning'},
]
you need to use a filter
create a method like this:
filterValues(item, queryText) {
const searchText = queryText.toLowerCase();
const fields = [item.someValue, item.someOtherValue];
return fields.some(
f => f != null && f.toLowerCase().includes(searchText)
);
}
Use the item Slot of v-autocomplete to display your bar Text, but use raw for your item-text as shown in my example:
<v-autocomplete
v-model="myvar"
:items="myitems"
item-value="foo"
item-text="raw"
>
<template slot="item" slot-scope="{item}">
{{item.bar}}
</template>
</v-autocomplete>
I am using a select control in my view , and I use the id to save it in a table, but i need too id name , to confirm this id and name. that in fact is a table (services)
I have used this two way of code that makes the same ... but I need get the id e name in diferent variables.
<select ="serv" name="serv">
#foreach($serv as $id=>$name)
<option value="{{$id}}">{{$name}}</option>
#endforeach
{!! Form::select('serv',$serv,null,['id'=>'serv'])
Do like this
{{ Form::select('serv',$serv->id,null,['id'=>'serv']) }}
Thanks! finally i used a script at onchange event , where i get the value and text of the select and then send this text to a hidden control.
<script type="text/javascript">
function ShowSelected()
{
var cod = document.getElementById("serv").value;
var combo = document.getElementById("serv");
var selected = combo.options[combo.selectedIndex].text;
document.getElementById("serv2").value=selected;
}
</script>
Does anyone know how to test vuetify v-select with laravel dusk?
I've tried $browser->select('size', 'Large'); without success
this is one of the v-selects that i want to test
<v-flex class="form__item">
<v-select
id="estatus"
dusk="estatus"
v-model="form.id_estatus"
label="Estatus"
:items="estatus"
item-text="nombre"
item-value="id"
v-validate="{ required:true }"
data-vv-name="estatus"
data-vv-as="estatus"
:error-messages="(errors.collect('estatus'))"
required
></v-select>
</v-flex>
And this the generated HTML
When v-select is clicked, shows the option list in other part of the HTML
Click on the .v-select element and wait for the select to open up:
$browser->click('.v-select');
$browser->waitFor('.v-menu__content');
Then you can select an option by index:
$browser->elements('.v-menu__content a')[2]->click();
Or by text (using XPath):
$selector = "//div[#class='v-menu__content menuable__content__active']//div[text()='State 3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();
(1) In the Vue template:
Wrap the <v-select> with a <div id="selectStatus"></div>
(2) In the Dusk test, use:
$browser->click('#selectStatus .v-select');
$browser->waitFor('.menuable__content__active');
$browser->elements('.menuable__content__active a')[1]->click();
$browser->waitUntilMissing('.menuable__content__active');
$browser->assertSeeIn('#selectStatus .v-select','theStatusIExpectToSee');
— OR —
The <v-select> can be tested without wrapping it in a <div id="foo"></div> if we use a slightly more complicated strategy.
Instead of putting the id on a div wrapper, we can put the id directly on the v-select or even rely on text content contained within the v-select with the following strategy (involving xpath):
use Facebook\WebDriver\WebDriverBy;
public function keyOfParentContainingItem($elements, $itemName, $itemValue = null){
$elWithItemKey = null;
$itemNamePrefix = ($itemName !== 'text()') ? '#' : '';
$itemValueMatchString = ($itemValue !== null) ? '="'.$itemValue.'"' : '';
foreach($elements as $k=>$v){
$xpath = './/*['.$itemNamePrefix.$itemName.$itemValueMatchString.']';
if(!empty($v->findElements(WebDriverBy::xpath($xpath)))){
$elWithItemKey = $k;
}
}
return $elWithItemKey;
}
public function testMyVSelect(){
$this->browse(function (Browser $browser) {
$browser->visit('/myAddress');
$els = $browser->elements('.v-select');
$els[$this->keyOfParentContainingItem($els,'id','idOnVSelect')]->click();
$browser->waitFor('.menuable__content__active');
$menuEls = $browser->elements('.menuable__content__active a');
$menuEls[$this->keyOfParentContainingItem($menuEls,'text()',"some text")]->click();
$browser->waitUntilMissing('.menuable__content__active');
$els = $browser->elements('.v-select');
$key = $this->keyOfParentContainingItem($els,'text()',"some text");
$this->assertTrue($key !== null);
});
}
Using Vuetify 1.5.14.
Click on the v-select element for it to list the options, then wait for the dropdown-menu class to be present before selecting an element from the list (2 in the example below) by clicking on the third tag in the menu list.
Finally, wait until the dropdown-menu class disappears before moving onto the next part of the test.
$browser->click('#region')
->with('#region', function ($vSelect) {
$vSelect->waitFor('.dropdown-menu')
->elements('.dropdown-menu a')[2]->click();
})
->waitUntilMissing('.dropdown-menu');
<apex:inputField type="number" value="{!varA}"/>
This is the code varA is defined in the apex controller now the value I want to show of it is 1 only integer but it is displaying 1.00 can you tell me how I can drop that decimal in showing the value?
I tried value={!ROUND(varA)} but its not working
Since you are using inputField to display it, the format is determined by the definition of the custom field varA. Can you change the custom field definition to not specify decimal positions?
Also you can try to use JavaScript for modifying view:
<apex:form id="formBlock">
<apex:inputText value="{!withDec}" id="withDec"/>
</apex:form>
<script>
if('{!withDec}' != '' || '{!withDec}' != null){
var itm = '{!withDec}';
document.getElementById('{!$Component.formBlock.withDec}').value = Math.floor(itm);
}
</script>