I want to render a FontAwsome User Icon as done here inside a VueJS component, I have tried to replicate the same example as you can see in this codesandbox, and I have tried the two approaches as the latter mentioned in the documentation, and applied the corresponding settings:
el.innerHTML = "Hi <i class='fa-solid fa-user'</i>";
el.innerHTML = "Hi <font-awesome-icon icon='fa-solid fa-user' />";
but the FontAwsome Icon was not rendered inside a VueJs component, can you please tell me How can I solve that please? thanks in advance.
OP ended up using the following
el.innerHTML = 'Erreur <svg viewBox="0 0 384 512"><path fill="currentColor" d="M224 402.7V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.7l-73.4-73.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7z"></path></svg>';
Related
I get into a problem. Here's my code:
<md-table-cell
:style="arrDisplay[1][i1+3] > 0 ? {background: 'orange'}: ''"
colspan="3"
v-for="(m1, i1) in 2"
:key="i1"
>
<div
contenteditable
v-text="arrDisplay[1][i1+3] > 0 ? arrDisplay[1][i1+3] : ''"
#blur="onEdit(1, i1+3)"
></div>
<div class="del" v-if="arrDisplay[1][i1+3] > 0">
<md-icon>clear</md-icon>
</div>
</md-table-cell>
I want the table cell have orange background when it's value > 0 else white. It work perfectly fine after calculate arrayDisplay but not when I edit it:
onEdit(y, x) {
var src = event.target.innerText
this.arrDisplay[y][x] = parseInt(src)
},
But if I edit it by Vue DeveloperTools it works. I think if I'm right the reason maybe Vue does not recognize that I change arrDisplay but have no idea how to fix it. What should I do ?
You are trying to update an item using an index in an array.
As explained here this is not reactive. That's why you don't see the update.
Try this:
Vue.set(this.arrDisplay[y], x, parseInt(src))
Note: make sure that this.arraDisplay[y] is reactive. If it is not, then you need to use Vue.set when creating it also.
I'm trying to make an application to automate job applying on linkedin with selenium.
When I find an xpath for an element on the webpage and tell my code to locate the element, it found it and clicked it with no issue.
However when I run the same exact code later on
alpha = driver.find_element_by_xpath("//*[#id='ember2350']/form/button")
I'm greeted with a no such element exception, why does this happen?
Edit:
Here's the HTML of the button I'm trying to get to
<button aria-expanded="false" aria-controls="linkedin-features-facet-values" class="search-s-facet__name-wrap search-s-facet__name-wrap--pill button-secondary-medium-muted" data-is-animating-click="true">
<div class="search-s-facet__name-wrap-container search-s-facet__name-wrap-container--pill">
<div class="search-s-facet__name">
<span class="visually-hidden">Expand LinkedIn Features facet</span>
<h3 class="search-s-facet__name Sans-17px-black-55%-semibold">LinkedIn Features</h3>
</div>
<span class="search-s-facet__svg-icon svg-icon-wrap"><li-icon aria-hidden="true" type="caret-filled-down-icon" size="small"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><path d="M8.8,10.66L14,5.12A0.07,0.07,0,0,0,13.93,5H2.07A0.07,0.07,0,0,0,2,5.12L7.2,10.66A1.1,1.1,0,0,0,8.8,10.66Z" class="small-icon" style="fill-opacity: 1"></path></svg></li-icon></span>
</div>
</button>
On LinkedIn #id are dynamic values, so you shouldn't use them to locate elements. Try below instead:
driver.find_element_by_xpath("//button[.//span='Expand LinkedIn Features facet']").click()
It seems that the Id - "ember2350" is dynamic and the numeric is changing so that's why it is not working as it is changing everytime.
Use this xpath :
//span[normalize-space()='Easy Apply']
I have a Svg and would like to make some parts of the viewbox attribute dynamic.
svg :viewBox="0 0 {{x}} {{y}}" :width="x" :height="y">
</svg>
What is the right syntax to implement this
You can't use interpolation, you will need a computed:
computed:{
viewbox(){
return "0 0 " + this.x + " " + this.y;
}
}
Then in your markup:
<svg :viewBox="viewbox" :width="x" :height="y"></svg>
The accepted solution does not work appropriately due to how svg handles viewBox.
You need to bind it as follows:
<svg :view-box.camel="viewbox" :width="x" :height="y"></svg>
With the other answer Vue converts the camel case of viewBox to all lowercase and the component does not render correctly. This will keep the correct camel case on viewBox
I'm using angular2 and bootstrap4. Popover correctly renders raw html as bold text asdf
<img src="assets/images/1.jpg"
data-container="body" data-toggle="popover" data-html="true" data-placement="top"
[attr.data-content]="getM()"/>
However, tooltip renders as plain <b>asdf</b> text including tags
<img src="assets/images/2.jpg"
data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
[attr.title]="getM()"/>
Component method getM:
public getM(): string {
return '<b>asdf</b>';
}
Both tooltip and popover are initialized the same way
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('[data-toggle="popover"]').popover({container: 'body'});
})
Could someone explain why is that and how to solve? It seems this is connected with initialization order, but I just don't know where to look further.
Well, the issue was that my element (which tooltip was attached to) was created dynamically.
In exact, I had a 1 sec delayed service. When new data arrived, the <img> element in my component was recreated, but $('[data-toggle="tooltip"]') selector doesn't work with dynamic elements.
Instead, I had to use this selector
$("body").tooltip({selector: '[data-toggle="tooltip"]'});
Now it works as intended.
PS I'm not a front-end developer, so anyone who can explain it in better terms is welcome.
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.