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' }}"> ...
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>
Currently trying to add a dynamic url to my background image inside select option. But it seems breaking, not sure how that comes and how to fix this. Looking for different combinations like ` or ' and even ". But really confused.
<select v-model.lazy="countryCode" #change="handleChange" class="select-field height-select-input select-width">
<option v-for="(country, index) in checkCountryName"
:key="index"
:value="country.country_code"
:selected="index === 0"
:data-value="country.city_name"
:style="{backgroundImage: 'url('https://www.countryflags.io/' + {{country.country_code}} + '/flat/64.png')'}"
>
{{ country.country_code }}
</option>
</select>
:style="`backgroundImage: url('https://www.countryflags.io/${country.country_code}/flat/64.png')`"
Is that the exact code you are using? If so, it looks like the issue is within the quotation marks on your url request.
You have
:style="{backgroundImage: 'url('https://www.countryflags.io/{{country.country_code}}/flat/64.png')'}"
Remove the quotes around the url and it should work
:style="{backgroundImage: 'url(https://www.countryflags.io/{{country.country_code}}/flat/64.png)'}"
I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?
Here is an example of how it works
<div class="mytrigger">
<ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul id="component-tab-left" class="uk-switcher">
</div>
Here is an example of how what I need
<div class="mytrigger">
<ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
Check out the dev tools. It should be 810switcher, but instead is taking it as a string
Any ideas? Thanks
I believe what you need is:
<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">
Or if you prefer not to use backticks:
<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">
The output will be:
<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">
A few notes:
Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.
Use data-uk-tab instead of uk-tab like below.
<div class="mytrigger">
<ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
For more information => Switcher with tabs
You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.
<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">
I wuld like to add the following style iwhich workss in html
<div style="text-decoration: line-through">
Now am trying this in vuejs2
<div :style="{'text-decoration: line-through':true}">
But the above doesnt work
Where am i going wrong?
Binding an object to the style attribute is done by providing key / value pairs.
I suspect what you want is
<div :style="{'text-decoration': condition ? 'line-through' : 'initial'}">
I have a custom component that conditionally renders either a link to path or a span for disabled link if the supplied path-disabled method determines so, the internals of which are unimportant other than it works when used like this:
<li>
<conditional-link path="/step/1" :path-disabled="pathDisabled">
<span class="number">1</span>
Step one
</conditional-link>
</li>
But if I do this it fails:
<li v-for="route in stepPaths['/step'].subRoutes">
<conditional-link path="{{route.fullPath}}" :path-disabled="pathDisabled">
<span class="number">{{route.number}}</span>
{{route.title}}
this outputs correct path:
{{route.fullPath}}
</conditional-link>
</li>
The path property value is the litteral string {{route.fullPath}}.
I tried path="route.fullPath" but then the path is the litteral string route.fullPath.
How do I get the path value into the path property in a loop? The variable is correct as it renders fine within the inside of the component.
OK it was easy so in case any other newbies run into this, you have to bind the object in the v-for to be able to use the object directly:
<li v-for="route in stepPaths" :route="route">
<conditional-link :path="route.fullPath" ...