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)'}"
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 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've tried my best to keep the following code as concise as possible.
The goal of this code: get tickets (products) via an api (data.json in this example) and display them in a table for users to buy.
The part I'm struggling with? Each product has a number which represents the maximum amount that can be bought per user. I'm showing these values dynamically in options, which works. To give you a better understanding, here is the code:
https://codesandbox.io/s/headless-currying-gocrw?fontsize=14&hidenavigation=1&theme=dark
Everything works as expected and wanted, but what truly would be great is to add a leading zero to the option numbers. Now when a user selects some tickets and changes his mind he won't be able to do so.
EDIT:
If you look at the code via URL above, it is indeed now fixed (thanks to the +1 solution and using the index as my values). Now I'd like to have 0 selected as the default value. I'm not really sure on how to achieve this.
The for-loop looks like this:
<select v-model="selectedTickets[product.id]">
<option v-for="(maximum, n) in Number(product.product_meta.maximum) + 1" :value="n" :key="n">
{{ n }}
</option>
</select>
Data function looks like this:
data() {
return {
selectedTickets: {},
products: null
};
}
You should add:
<option value="0"> 0 </option>
Before your v-for loop on options, so it would look like this:
<select v-model="selectedTickets[product.id]">
<option value="0"> 0 </option>
<option
v-for="(maximum, n) in Number(product.product_meta.maximum)"
:value="maximum"
:key="n"
>
{{ maximum }}
</option>
</select>
Now, that first option would be the default one, and user would be able to go back anytime.
One other thing that you can do is just to add +1 to product.product_meta.maximum and use n for :value instead of maximum.
The best option, though, would be to create one method called getSelectableOptions(product) that will return the array of selectable options for given product, for example [0, 1, 2, 3, 4, 5] and then you can loop through it, that way your code will be cleaner.
Hope this helps!
You can add a clear button at the bottom to reset all the selection
<button #click="selectedTickets={}">Reset</button>
It is also possible to implement individual clear buttons for each select input like the following:
<select v-model="selectedTickets[product.id]">
<option
v-for="(maximum, n) in Number(product.product_meta.maximum)"
:value="maximum"
:key="n"
>
{{ maximum }}
</option>
</select>
<button
#click="resetSelection(product.id)"
v-if="product.id in selectedTickets"
>
Clear
</button>
Then create a method in the methods section
resetSelection: function(productId) {
delete this.selectedTickets[productId];
}
This will clear individual selects.
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 would like to have something like the following Vue template, but it does not work with the property selectedVal. What is the correct property name?
<select :selectedVal="myList" multiple>
<option value="abc">ABC</option>
</select>
For <input> the prop to bind is value, but for <select> it does not seem to be documented anywhere. I am looking for the name of the correct prop to bind.
I answered because it's difficult to quote code snippet in a comment.
I think you asked this question after looking into the document here, which showed an elegant way to define selected items.
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
Actually, I doubt if there's a v-bind prop performs like this because value is an attribute of input and option, but selected is not an attribute of select but an attribute of option and I can't find any alternatives in select.
Also, after browsing the source code of Vue.js, I didn't see vue did much for binding an attribute (code here and here) rather than pushing values of v-bind into the element's attrs list.
export function addAttr (el: ASTElement, name: string, value: string) {
(el.attrs || (el.attrs = [])).push({ name, value })
}
On the other hand, select seems to be an special case in v-model (see code here).
So, I provided the solution in the comment by binding selected to option instead of select.