I would like to know how to change this vue-multiselect example shown at this link (https://vue-multiselect.js.org/#sub-tagging), so that the array shown underneath only shows a list of names separated by commas. You can see in the image, I have selected Javascript and Open Source...and beneath it shows the entire object for both. I want to only show the 2 names separated by commas. Any help would be appreciated...
Can I make a simple change (hopefully) to this {{ value }} call below to accomplish this? Changing to {{ Value.name }}, etc does not work.
<div>
<label class="typo__label">Tagging</label>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" #tag="addTag"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
One way is to convert it using javascript in the binding:
<pre class="language-json"><code>{{ value.map(v => v.name).join(', ') }}</code></pre>
Related
I want to add tooltips for some "Categories" box in Zendesk, so when the user hang over one box then I can show a tooltip with more information about the "Category".
Problem is that I'm trying to use IF statement like this:
{{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic' }}
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#if href == 'url_to_compare' }}
<a class="tooltiptext">tooltip_text</a>
{{/if}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
As this IF is inside of a {{#if}} of the categories I want to select in this example only one link using the href to see if the mouse is over or not the box.
I already tried to add a helper in the script.js file but looks like it's not working, I remember that there was a way to use this IF and IS to be able to solve it.
Thanks!
I get a lot of help on this, at the end I found that the better way to solve this is using a {{#is}} statement, So it's possible to use {{#is name "Category Name"}} {{/is}}
And this option will do a comparation between the name of the Category and the name you are looking for, if the value it's equal then you can do something inside, if not then you can use an {{else}} between and do another thing over there.
{{#is name "Category Name"}}
<div class="tooltip1">{{name}}<span class="tooltiptext">{{excerpt description}}</span></div>
{{else}}
<span class="blocks-item-title">{{name}}</span>
{{/is}}
I used the "Excerpt description" to add the value of the tooltip inside Zendesk, and no need to add it manually in the home_page.hbs code.
I added 3 different tooltips and working fine now. Thank you all!
For example this HTML
<div>
<span></span> I want to find this <b>this works ok</b>.
</div>
I want to find a DIV with I want to find this in it and then grab the whole text inside that DIV including child elements
My XPATH, //*[contains(text(), 'I want to find this')] does not work at all.
If I do this //*[contains(text(), 'this works')] it works but I want to find any DIV based on I want to find this text
However, if I remove the <span></span> from that HTML, it works, why is that?
text() only gets the text before the first inner element. You can replace it with . to use the current node to search.
//div[contains(., 'I want to find this')]
This will search in a string concatenation of all text nodes inside the current node.
To grab all text you can use node.itertext() to iterate all inner texts if you are using lxml:
from lxml import etree
html = """
<div>
<span></span> I want to find this <b>this works ok</b>.
</div>
"""
root = etree.fromstring(html, etree.HTMLParser())
for div in root.xpath('//div[contains(., "I want to find this")]'):
print(''.join([x for x in div.itertext()]))
# => I want to find this this works ok.
Try using //*[text()=' I want to find this '] , this will select the div tag and then for text you can use the getText() method to get the text
You can try Replace text() with string():
//div[contains(string(), " I want to find this")]
Or, you can check that span's following text sibling contains the text:
//div[contains(span/following-sibling::text(), " I want to find this")]
I'm trying to render a Block's Field as Plain Text as I need it used as part of HTML, I've tried using |RAW however I read it was unstable + it didn't work haha!
This is my existing HTML minified
Read More
However I would like to make it more useable
Read More
This would mean that when a user modifies the DrupalBlock HEX code it would change the color of the box. However the issues is when it's printed on the page it's looking like this
<div data-quickedit-field-id="#" class="field field--name-field-color field--type-string field--label-hidden field--item quickedit-field">FFFFFF</div>
the only thing I would like printed is "FFFFFF" with no div's
-
Here is my question: How do I display my Field_color as plain text when it prints?
You can use |raw : {{ content.field_color|raw }}.
If you need more information please ask.
I suggest you do a dump or kint of your content.field_color variable. You might be able to get some more information on it and get the answer!
Anyway, we have something similar in our project and the way we do it is by using a .getString() method.
{% set image_align = content.field_image_align['#items'][0].getString() %}
<div class="{{ image_align }}">
Our field is a list of values so you'll have to look for another array item to call the .getString() method on.
Inside a capybara test, I need to fill in a text field that doesn't have a unique id or class attribute.
The text field (the field called title in this case) can appear anywhere on the page. The only thing we know is that the text field is wrapped in a div and this div sits immediately after an h3 tag which has the content "Title"
<h3>Title</h3>
<div class="input-row clear">
<input id="ember5046" class="ember-view ember-text-field" type="text">
</div>
<h3>Work Location</h3>
<div class="input-row clear">
<input id="ember5048" class="ember-view ember-text-field" type="text">
</div>
How can I do it?
We are not allowed to use xpath (company policy)
We are not allowed to do index based selectors like all("input")[0]
I think it should be possible with the css adjacent siblings combinator selector. Something like:
h3[text=Title] + div
This gives you the next element matching the thing after the +. If you rather want everything that matches you could use the ~ operator instead. These siblings selector can only help you to find things after a certain node. Going backwards is not possible as far as I know.
Hi I tried adding a range from 1-10 to a field in my model and it caused 2 mini arrows to appear to the right of my editor field that increment and decrement the value inside by 1. I would like to know how to remove these arrows. Any advice would be great. Thanks
Instead of using #Html.Editor html helper, use #Html.TextBox, this will solve your problem.
Because the property type is integer, if you'r using #Html.Editor, it will generate html like below:
<input type="number" id="Data" />
Notice the input element type is number, if your browser support HTML 5, it will show two arrows to the right. It's an html 5 feature.
But, if you're using #Html.TextBox, it will generate html like below:
<input type="text" id="Data" />
This time the type is text, it will not show the arrows.