How can I pass in rendered HTML to a vue property? - javascript

I'm using vue-material and I have:
<md-dialog-confirm
:md-active="true"
md-title="Make an Outboud Call"
md-confirm-text="Agree"
md-cancel-text="Disagree"
md-content="some <p>HTML</p> here"
#md-cancel="$emit('closeModal')"
#md-confirm="$emit('accept')"
>
For md-content, I can pass HTML but want it to be rendered via the Vue.js template engine so I can use my {{template interpolation }} as needed.
Can someone please help?

You could pass a dynamically generated HTML. If it is just a simple case, you could even do it inline with a template string:
<md-dialog-confirm
:md-active="true"
md-title="Make an Outboud Call"
md-confirm-text="Agree"
md-cancel-text="Disagree"
:md-content="`some text with the value <b>${yourVariable}</b> here`"
#md-cancel="$emit('closeModal')"
#md-confirm="$emit('accept')"
>
Note the : in front of md-content which is the shorthand for v-bind.

Related

How to convert html string code into an actual html working code that will appear in front end?

I am using a v-for"item in items"
then I have values in my {{ item.data }} which is an html element but with a values already, example
{{ item.data }} has a value of a string "<'qr-code value="this has specific infos that is already created for this specific code" '>"
so when I would run it on my page with just {{ item.data }} , this will show up
<'qr-code value="this has specific infos that is already created for this specific code" '>
it prints the html code and not running it.
BUT when i try to copy that code and paste it in my html, it works.
it is just how can I make this string code into an actual working HTML code
How can i resolve this?
The directive v-html will render content from string as plain HTML, you can use like this example.
<div v-html=“yourVar”></div>
If you need more information, here more examples:
https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive
If I understood the situation correctly you are looking for the component tag.
You can use :is="" to set the element node type.
You can find more information here:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

Pass a string to javascript function from render_field tag in Django

I can pass a string value to javascript function onblur when using plain html tag as shown below:
<input type="password" name="l_password" onblur="passwordValidation(this,'id_lpassword_error')" />
but when i try to do the same thing for render_field tags it doesnt work. i get error TemplateSyntaxError: Could not parse the remainder
{%render_field form.password onblur="passwordValidation(this,'id_lpassword_error')" %}
how can i pass the string 'id_lpassword_error' to a javascript function from the render_field tag in Django?
render_field is doing its own custom parsing of that tag, and it looks like it treats double quotes and single quotes the same. So it is probably looking for the tag to finish after your first single quote.
It looks like using the filter attr should work, since it is using Django's built-in template tag parsing system, which almost definitely can deal with different types of quotes properly.
So, if I'm understanding this right, something like:
{{form.password|attr:"onblur:passwordValidation(this,'id_lpassword_error')" }}
Let us know if that works.

Accessing a html tag attribute in Django template expression

There is a html element:
<input type="text" id="someInput" name="someInput"></input>
It's value is set in JavaScript:
var tbIndx = 10;
document.getElementById("someInput").value = tbIndx;
Now,I want to construct a Django for-loop which would use the value of the html tag described above.Something like this:
{% for i in val %}//val is the innerHTML of the input box described above.
//code
{% endfor %}
Can we access a value like this in a Django template?Please suggest some methods for achieving this functionality.
Thanks
No you can't do this. Django for loop will run only for values passed from context in view.py. Better you submit the input value using Ajax. And return it to run in template from Ajax response.

Angular 2+ - ng-content as an attribute value in the template

I have component that looks something like this:
<text-field name=myusername>Username</text-field>
I'd like to place "Username" in the placeholder attribute of an input, kind of like this:
<input name={{name}} placeholder="{{ng-content}}">
Of course, the above doesnt work but I was wondering if there is a way to put the ng-content in an attribute?
here is my test plunker:
http://plnkr.co/edit/gk0Y6IQGXyk4gJz5EjV4?p=preview
Of course there are workarounds, like the one I created in an adaptation of your plnkr: http://plnkr.co/edit/c7XEgIDiFchjMjzVmyBF?p=preview
<span style="display: none;" #text><ng-content></ng-content></span>
<input name={{name}} placeholder="{{text.innerHTML}}">
Use a hidden span to contain the content and use that as value for your placeholder.
No that won't work. The only way to display the content is using:
<ng-content></ng-content>
You are trying to use a different kind of #Input, and to keep everything semantically the same obtaining such kind of 'input' is not supported. Just use an attribute and an #Input in your component

Display raw HTML markup from CKEditor in Angular template

I use CKEditor in my AngularJS Application. When I try to display the text that I saved from the TextEditor, it doesn't take the style. For Example if I want to display a sentence it appears as:
<p>How old are you</p>
instead of :
How old are you
I tried using ng-bind:
<div ng-bind="Item.Header"></div>
and the regular binding method:
<h3>{{Item.Header}}</h3>
But both methods didn't work. Is there a solution for this issue?
You should use "ngBindHtmlUnsafe". Since this command doesn't sanitize the expression, but you should only use it if you trust the source.
So the html will be written as follows:
<div ng-bind-html-unsafe="Item.Header"></div>

Categories

Resources