How can I write and ampersand in a v-input in vue?
<v-input
label="Terms"
description="I agree to Terms & Conditions
type="checkbox"
:value.sync="registerDetails.terms"
:v="$v.registerDetails.terms"
/>
Try the following including using the html code for ampersand as well as correcting usage of single and double quotes:
<v-input
label="Terms"
description="I agree to <a href='/legal-information/terms-conditions' target='_blank'>Terms & Conditions</a>"
type="checkbox"
:value.sync="registerDetails.terms"
:v="$v.registerDetails.terms"
/>
Hopefully that helps!
Related
I am applying translation in vue 2.x and I am using "vue-gettext" but I am having a problem in some cases eg:
<settings-group label="is a label" >
<settings-field label="is a label">
In those cases I can't find a way to translate the label, I was looking for info and there is nothing, but maybe someone here could solve it...
Things I tried:
<settings-field v-translate label="is a label">
Doesn't work
<settings-field label="{{<translate>is a label</translate>}}">
Throw an error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use <div :id="val".
thank you.
First option (preferred, since in vue3-gettext translate tag would be eventually removed):
<settings-group :label="$gettext('is a label')" />
Second option -- create slot label in settings-group component. Could be useful if you going to interpolate string based on some data from settings-group
# settings-group.vue
<div class="settings-group">
<span class="label">
<slot name="label" v-bind="{ count }" />
</span>
...
# pages/settings.vue
<settings-group>
<template v-slot:label="{ count }">
<translate
:translate-n="count"
:translate-plural="%{count} elements"
:translate-params="{ count }"
>
%{count} element
</translate>
</template>
</settings-group>
I load some images like this in my template:
<img
v-if="idRobot === 7"
src="~#/assets/img/faceTibot.png" />
But I'd like to load the asset dynamically. For example, something like this would be great:
<img
v-if="idRobot === 7"
:src="`~#/assets/img/${dynamicasset}.png`" />
Actually, when I do this, VueJS thinks I want to load the string "~#/assets/img/${dynamicasset}.png".
Is what I want even possible in VueJS3?
Ah, BTW I searched SO and found this but suggested require solutions don't work: https://stackoverflow.com/a/47480286/1098303
Thanks in advance
Have you tried this solution ?
<img :src="require(`~#/assets/img/${dynamicasset}.png`)" />
I am having trouble writing simple logic using blade when attributes are involved for instance
<a href='#' class= {!!$activeCategory==$category->id ?
'accordion-toggle active ' :
'accordion-toggle inactive '
!!} />
i want it such that i can switch between the two last classes for my tag. also the first item remains unchanged i cannot concatenate as i cant use braces midway an attribute, however still when using it like this for some reason only the first word is set in the class string and the last is broken out of the string into just a hanging attribute. i hate that . how can i solve this and still write it in an concise manner or what's the trick in working with those curly braces in laravel, there always seems to be a catch each and every other time unlike how it works in other templating engines. the following is the created code on element inspect
<a href='#' class="accordion-toggle" active />
3 things:
You don't need {!! !!} for non-html {{ }} is fine
Don't repeat "accordion-toggle"; put it outside the braces
Wrap everything in " ", use ' ' in the braces:
<a href="#" class="accordion-toggle {{ $activeCategory == $category->id ? 'active' : 'inactive' }}"> ...
I am new to vuejs, and I would like to know what ':' and '#' does in the context of this code?
I am unsure about if this the initial values for the module.
Thanks for any help.
Here is the code:
<appWindow
:app="activeApp"
:active="windowActive"
#closed="windowActive = false"
#removeApp="removeApp"
#resetNotes="resetNotes"
#updateCheckbox="updateCheckbox"
/>
# is synonymous to v-on:
It is used to handle Event
For more: https://v2.vuejs.org/v2/guide/events.html
<!-- these two are same -->
<button v-on:click="foo()">Button</button>
<button #click="foo()">Button</button>
: is synonymous to v-bind:
It is used to binding value to an attribute
For more: https://v2.vuejs.org/v2/api/#v-bind
<!-- these two are same -->
<img v-bind:src="imgurl">
<img :src="imgurl">
The # is shorthand for v-on
A : on a prop will make the contents evaluate as javascript rather than a string.
im trying to use razor to generate a url like this
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage).png" />
but the .png bit is being added to the #htmlraw syntax and is not compiling. I know i need to tell the page that #htmlraw is over. I tried using ; which worked - but the ; was also displayed in the string when displayed.
How can i get it so it would display like this. When Model.user.defaultImage = random1
<img id="currentPic" src="/content/img/random1.png" />
thanks
try adding a new set of parenthesis
<img id="currentPic" src="/content/img/#(Html.Raw(Model.user.defaultImage)).png" />
Try #{Html.Raw(Model.user.defaultImage)}
I think you don't need Html.Raw, just use
<img id="currentPic" src="/content/img/#(Model.user.defaultImage).png" />
This feels like a hack, but works:
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage + ".png")" />