Whilst looping through some links, I would like to apply classes to a element based on two ternery conditions, eg:
<a
:class="route.cond1 === true ? 'bg-red-500' : 'bg-green-500'
:class="route.cond2 === true ? 'text-blue-500' : 'text-purple-500'"
>
CLICK
</a>
How can I do this?
You can use the class object syntax to bind multiple classes:
<a :class="{'bg-red-500': route.cond1, 'bg-green-500': !route.cond1,
'text-blue-500': route.cond2, 'text-purple-500': !route.cond2}">
CLICK
</a>
Related
I'm trying to fetch a span of 4,600 elements
<span> 4,600 </span>
i inspected the elements and found that each element is a list class which has a child class with a title and href that i want to fetch the problem is that :
not all elements are visible , you would have to scroll down the api to find more elements
i cant seem to successfully fetch a single piece of data
puts browser.th(:class => %w("_9irns _pg23k _jpwof _gvoze")).link.hreflang
this is the structure of the code i'm trying to fetch
<ul class = 'xxx'>
<div class = 'xxa'>
<li class ='fff'>
<li class ='fff'>
<li class ='fff'>
.
.
the <li class = 'fff'> has <a class='xxx xxx xxx xxx'> having the data i'm trying to fetch tittle and href
to be more clear how can I iterate over all the classes of 'fff' and pick a url which is in a child class of it.
Don't use quotes inside the %w to find an element from a collection of classes, and try requiring watigiri gem and using #text! to obtain text of hidden elements.
I want to remove all classes named active of all <li> under <ul id="navNovelty"> using prototypejs.
I did $('ul#navNovelty li').removeClassName('active'); but it did not work. Here is my full code
<ul id="navNovelty" class="nav om">
<li id="multimedia" class="active">Multimedia</li>
<li id="love">Love & Family</li>
<li>MyBusiness</li>
</ul>
How to remove class from all list of an id with prototypejs ?
Unlike jQuery, Prototype has a different accessor for single elements and multiple elements. If you want to target a single item, and find it by its id, you use one dollar sign:
$('navNovelty').removeClassName('active');
If you want to access multiple items, you use two:
$$('ul#navNovelty li').map('removeClassName', 'active');
I have some data that is accessible via:
{{ content['term_goes_here'] }}
... and this evaluated to either true or false. I'd like to add a class depending on the truthiness of the expression like so:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline. The way I wrote it above gives me an error:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
How should I write it to be able to conditionally determine the class?
Use the object syntax.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
When the object gets more complicated, extract it into a method.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Finally, you could make this work for any content property like this.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
<i class="fa" v-bind:class="cravings"></i>
and add in computed :
computed: {
cravings: function() {
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
Why not pass an object to v-bind:class to dynamically toggle the class:
<div v-bind:class="{ disabled: order.cancelled_at }"></div>
This is what is recommended by the Vue docs.
the problem is blade, try this
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
You could use string template like with backticks `` :
:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"
if you want to apply separate css classes for same element with conditions in Vue.js
you can use the below given method.it worked in my scenario.
html
<div class="Main" v-bind:class="{ Sub: page}" >
in here, Main and Sub are two different class names for same div element.
v-bind:class directive is used to bind the sub class in here.
page is the property we use to update the classes when it's value changed.
js
data:{
page : true;
}
here we can apply a condition if we needed.
so, if the page property becomes true element will go with Main and Sub claases css styles. but if false only Main class css styles will be applied.
let say I have DOM like this:
<div id="tabsmenu">
<ul>
<li class="one">foo</li>
<li class="two">baz </li>
</ul>
</div>
and I would like to get the text from <a href> elements:
# desired output: ['#foo', '#baz']
How to do it using xpath and using combination id and element with a specific class within id ?
Already tried:
some_doc.xpath('//a[#id="tabsmenu"]/[#class="ui-tabs-anchor"]/#href')
# select all href tags of any a element that is in id tabsmenu and class attribute ui- tabs-anchor
EDIT - corrected tabmenu into tabsmenu
You're most likely looking for something like this:
//div[#id='tabsmenu']//a[#class='ui-tabs-anchor']/#href
That will get all href attributes that are part of an a tag with the class ui-tabs-anchor and inside a div element with the id tabsmenu.
Also you might want to take a look at this question:
Find out if class name contains certain text
This is because the class will match the exact value (ui-tabs-anchor) and maybe some additional class might be added there such as class="ui-tabs-anchor disabled" and then there will not be a match in there.
From what I understand:
View::share('foo','bar');
Will make $foo available in all views.
However, is it correct to say View::share() can be used only in the __construct()?
Because from outside __construct() I can't make it to work.
View::share should be available anywhere within your application. A common place that it is used is in view composers, but it should be usable within a route or wherever you need it.
Yes, adding:
View::share('foo','bar');
in your routes.php file will make $foo (with a value of 'bar') available in all views. This is especially useful for something like Twitter Bootstrap's "active" navigation classes. For example, you could do:
View::share('navactive', '');
to make sure the navactive variable is set in all views (and thus won't throw errors) and then when you are making views (in your controller, for example), you could pass:
return View::make('one')->with('navactive', 'one');
and then in your view (preferably some bootstrappy blade template) you can do the following:
<ul class="nav">
#if ( Auth::user() )
<li #if ($navactive === 'one') class="active" #endif>One</li>
<li #if ($navactive === 'three') class="active" #endif>Three</li>
<li #if ($navactive === 'five') class="active" #endif>Five</li>
#endif
</ul>
Basically if you want to share the variables through all view, you might first want to create a base route(E.x.:internalController.php) as a parent class then extend other controllers as a child of it(E.x:childController.php).
And yeah you will most likely set the view::share('foo', $bar) in the __constructor() of the internalController.php, since it lunches whenever the class is initialized, this way the parent class will serve the variable values to the child classes.