I am new in Aurelia. I am getting data from the server and need to modify text it while populating in html. I am trying it by following code.
<span textcontent.bind="modifytext(text)" ></span>
Please help me to do that.
you should have a variable in your ViewModel (js/ts) to hold your text.
and then you can bind to it in the html
<span>${myVar}</span>
now in the js - you just assign this variable with the text you want to show.. and thats it.
for array you should use the repeat.for="i of arr" binding.
<div repeat.for="i of arr">${i}</div>
all of this, and more is explaind in aurelia.io
you should read the fundumentals and basic binding techniques -
it's not a lot of reading - and it will help you a lot.
Related
Dynamic multilingual sites from the backend to the replacement of large sites
I changed the language, but this time I am trying for the first time to do it at the front desk (Nuxt.js + i18n).
<a href="https://gooogle/en.com" data-link="fugafuga">
Without using nuxt-link
<template>
<a href="https://gooogle/｛｛t('locale')｝｝.com" data-link="｛｛t('hogehoge')｝｝" >
</template>
Is it possible to divert and use a tag as it is?
(In the above writing method, an error occurred and it was useless, so please teach me a workaround)
I18n t method wrapped in quotes in inside tag quote
How do I write it?
Such a shape is desirable because the scale is too large
We apologize for the inconvenience, but we would appreciate it if you could teach us.
thank you.
Suggested fix:
<template>
<a :href="`https://google/${t('locale')}.com`" :data-link="t('hogehoge')"></a>
</template>
You can read more about data binding with Vue/Nuxt here: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax
I have a page.vue with multiple sections and what I am trying to do is add a link to get that particular section on click. I am not sure where I am going wrong. Please help me find the issue. I have no experience with Vue.
<template>
For more information, please <a #click="$vuetify.goTo('#about', options)">click</a>.
<p>About section</p>
<p :id="about">More information section</p>
</template>
You have an error in your javascript. by using the : syntax before a property, you're actually using v-bind, so the expectation is that the right-hand assignment is a number, boolean, array, object or variable. Because about is a simple string, and not a variable, this won't work. Just remove the :
<p id="about">
Now it will work fine.
Here is an example:
<input name="TESTE" id="TESTE" placeholder="TESTE">
is there a way to do that?
<div name="TESTE">
<input :name="parent.name" :id="parent.name" :placeholder="parent.name">
</div>
I dont want to do that using vue data or components. Can i do that using only pure html like example above?
Thanks!!!
Unfortunately that's not possible. You'll need to use some sort of data field for this to work. Vue renders HTML according to the data you provide it and is otherwise unaware of the properties of surrounding elements. Your best bet is to either hard-code these values or add the appropriate data fields to reference.
It's generally better practice to use the data, anyway, as it will cut down maintenance time and mitigate issues with user error.
According to the VueJS docs, <span v-text="msg"></span> is the same as <span>{{msg}}</span>. Out of really nothing other than habit I always use the "mustache" syntax to bind data. In what situations would one choose to use v-text instead, and why?
One reason you might want to use v-text is if you need to pre-render some markup on the server, but also have it bind client-side. For example:
<span v-text="msg">This message was pre-rendered from the server.</span>
That way the {{msg}} syntax doesn't get in the way of the content.
This directive updates a html-node with innerContent. Html will not be rendered like with v-html. You can use v-text to have your template look other but internally, {{ Mustache }} interpolations are also compiled as a v-text direcitve.
v-text, or "Directive Syntax" interpolates a property value as an HTML element's text.
If you need to bind to a part of the element only you need to use Semantic syntax ({{mustache}}).
For example, if you had <h4>Hi, this is the text : {{text}}</h4> then, during the update only what's inside {{text}} would be replaced. However, if you use v-text it will replace the whole content of the element.
Just a heads up, for situations where you mistakenly use v-text when your variable contains mark up, it will be rendered as raw html in the browser, just a gotcha to watch out for.
I have not been able to find any documentation for the select() function that I have seen used to identify binding templates in Windows 8 store apps, nor have I been able to find it defined in the WinJS base.js or ui.js files. It seems to work like a normal CSS selector to identify the itemTemplate:
<div id="listViewTemplate" data-win-control="WinJS.Binding.Template">
<h1 data-win-bind="textContent: firstName"></h1>
</div>
<div id="listViewDiv" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate: select('#listViewTemplate')}"> <==== HERE <====
</div>
When identifying a binding template by its id, the use of the select() function seems to be optional. However, if using its class name, select() seems to be required.
Where is the select() function documented or defined?
It's in base.js, line 2712, and ultimately calls querySelector (or querySelectorAll)
If you put a breakpoint at _evaluateObjectQueryExpression in base.js (around Line 6154) and step through, you'll get some insight as to how the value is parsed.