I have following code in vue.js file
<p>{{match.tournament_name}}<p>
Above code will print tournament name inside p tag.
Now I want to pass match.tournament_name as query string for my a tag. But I am not sure how to do string interpolation in Vue.js. I have tried like this
Upload Score Card
But above string interpolation doesn't work. So How can I pass match.tournament_name as query string ?
For that you can use v-bind attributes. For example:
<a v-bind:href="`/score_cards/new?tournament_name=${match.tournament_name}`">Upload Score Card</a>
Also you can use reduction :href instead of v-bind:href
Related
I am writing a custom TagHelper that should change its behavior based on what child elements its owner tag has. This will be used for substituting custom html elements in a localized string.
Here's a simple example of what I'm trying to do:
<h2 locale-key="Hello, %1!">
<span class="bold" locale-parameter="1">#userName</span>
</h2>
In the example above, the TagHelper for LocaleKey will change the content of the <h2> tag to a localized string. If this is a simple string with no parameters, then I can just simply use output.Content.SetHtmlContent() in the TagHelper to set the h2's content to the string. However in this case, the localized string has a parameter (%1), and I want the corresponding child element (<span parameter="1">) to be substituted in the final output. So the final rendered html would look like this:
<h2>Hello, <span class="bold">Lázár Zsolt</span>!<h2/>
To achieve this, I should be able to see all the child elements in the DOM from the LocaleKey TagHelper, so I can generate the correct HTML code. In the TagHelper's ProcessAsync method I can access the TagHelperContext and the TagHelperOutput, but I couldn't find any information about child elements in either of these objects while debugging. Is this possible somehow?
Another approach is to leave the string as is, with the %1 parameter key, and then use the child ParameterTagHelper to substitute itself into the parameterized string. To do this, I'd have to see the siblings of the current tag from the TagHelper.
Recursion would also be fun (e.g. the <span> is also localized and has its own parameters), but for the scope of this question, I'd be happy if I could get this to work without recursion.
I posted too soon again... There is a GetChildContentAsync() method in TagHelperOutput that will... get the child content asynchronously.
using vue.js I'm wondering what is considered the best way to insert span elements into a text at multiple given positions? Specifically, in a simplified example, I have:
text = "This is a random text. It goes on and on..."
positions = [0, 5, 17]
span_templ = '<span class="some_class" />' <-- closed span for sake of simplicity
The workflow is: the user clicks on a button, some RESTful request is sent to a server, which returns both text and positions. A <p> shall be updated with the text but with inserted <span> elements.
I'm relatively new to vue.js, so I'm wondering what is more typical in vue.js: rather do the String update in the template {{ ... }} itself or would you first update the String in plan JS and then simply refer to the String in the moustache part?
You can use v-html and pass the HTML string as prop.
Example use: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
API doc: https://v2.vuejs.org/v2/api/#v-html
I need get string inside slot before that slot is compiled. Is posibble?
Example
<div>
<slot>
<component-test text="test1"></component-test>
</slot>
</div>
I need as result "<component-test text="test1"></component-test>"
hmm seems its treating slot content html so .. in end result if you need it as string and use later on then you have to do some trick.
first you need to put real string there:
escape('<component-test text="test1"></component-test>');
output : %3Ccomponent-test%20text%3D%22test1%22%3E%3C/component-test%3E
use this output content and put that in slot.
this will treat as string.
now if you need to use that string's real html
convert it back to html using :
unescape('%3Ccomponent-test%20text%3D%22test1%22%3E%3C/component-test%3E')
output :
<component-test text="test1"></component-test>
in this way when you need to transfer html/string you can make it real string then when you need to use/compile make it html again.
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"
I need to replace few selected html tags from string .
Like for example let the string :
<B><SMALL>DSD-DNPH Color Cap Insert</SMALL></B>
and I did in following way :
REGEXP_REPLACE(name_text, '<[SMALL>]+>|<[/SMALL>]+>', '')
But I want to remove all selected html tags like: <B>, <SMALL> and <FONT> .
Can you please suggest me to do this in single line for multiple selector.
You can use the following construct to get rid of tags like constructs from string:
regexp_replace(name_text, '<.*?>')