I want the first letter of this data to be Uppercase
<li>{{error}}</li>
how can i do?
Option 1: String interpolation
You could use toUpperCase() on the first character of error, and append the remaining characters with slice(1). Do this directly in the string interpolation (i.e., the curly brackets in the template).
<li>{{ error[0].toUpperCase() + error.slice(1) }}</li>
Option 2: Computed prop
Similar to the above, you could use a computed property to create the string, and render that in the string interpolation:
<li>{{ computedError }}</li>
<script>
export default {
computed: {
computedError() {
return this.error[0].toUpperCase() + this.error.slice(1)
}
}
}
</script>
Option 3: CSS text-transform: capitalize
Instead of JavaScript, you could do this with CSS, using text-transform:
<li class="error">{{ error }}</li>
<style scoped>
.error {
text-transform: capitalize;
}
</style>
Related
Following the example in the docs, I'm using transition-group for a list of items. Strangely it works when items appear (enter), not when they disappear (leave), meaning they slide down in an animated fashion when appearing, but disappear instantly without animation: the leave animation failed. Why?
<template>
<div v-if="notifications.length">
<transition-group name="notifications">
<span
v-for="notification in notifications"
:key="notification.id"
>
<!-- content -->
</span>
</transition-group>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
notifications: state => state.notifications.notifications
})
}
}
</script>
<style lang="scss" scoped>
.notifications-enter-active,
.notifications-leave-active {
transition: all 0.5s;
}
.notifications-enter {
transform: translateY(-100%);
}
.notifications-leave-to {
opacity: 0;
}
</style>
Store
export const mutations = {
DELETE_NOTIFICATION (state, id) {
state.notifications.splice(
state.notifications.findIndex(item => item.id === id),
1
)
}
}
I couldn't reproduce the exact symptom with that code (demo 1), which only transitions on leave instead of enter in your scenario. The reason for that is because the span is display: inline, which prevents the transition.
The Vue docs provide a tip for this:
One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.
So, you can apply display: flex on the transition-group:
<template>
<transition-group class="container">
...
</transition-group>
</template>
<style>
.container {
display: flex;
}
</style>
demo 2
Or display: inline-block on the span to be transitioned:
<template>
<span class="notification-item">
...
</span>
</template>
<style>
.notification-item {
display: inline-block;
}
</style>
demo 3
Turns out by replacing <div v-if="notifications.length"> with <div v-if="notifications"> transitions now work. Even though this doesn't make any sense to me.
If anyone can explain in a comment that'd be nice :)
Is there a way to define css selector properties dynamically ?
For example how to define "color" property of ".some-style" selector with the value got from the backend server?
<style>
.some-style {
color: #ffc050;
}
</style>
Create a dynamic style in your top-most element in your template.
Assign the backend response of your properties to a computed function.
Set style lang to lang='scss' then use CSS varialbe function var() to set the values.
Example
<template>
<div :style="cssProps">
<div class="some-style">
Hello Mars
</div>
</div>
</template>
<script>
export default {
computed: {
cssProps() {
// backend response with your css values
let backendResponseObject = {
fontColor: "black", // you can use rgb or hex
backgroundColor: "White" // you can use rgb or hex
}
properties = {
"--brand-base": backendResponseObject.color,
"--brand-primary": backgroundColor.hex,
};
return properties;
}
}
}
</script>
<style lang="scss">
.some-style {
color: var(--brand-base);
background: var(--brand-primary);
}
</style>
bootstrap-vue will by default create a header row for my data.
Is there any way to hide the header row for a <b-table> so only data items will be rendered?
From the documentation here, there is an option to set the class for the header (i.e the generated <thead>) with thead-class set to the <b-table> element, or to the header row (i.e the <tr> element under the <thead>) with thead-tr-class set to the <b-table>.
Only note that is the <style> is scoped this will not work.
Here is a simple component based on this idea.
<template>
<b-table :items="items" thead-class="hidden_header"/>
</template>
<script>
export default {
name: 'my-table',
props: {
items: {
type: Array,
required: true
}
}
}
</script>
<!-- If we add "scoped" attribute to limit CSS to this component only
the hide of the header will not work! -->
<style scoped>
<!-- put scoped CSS here -->
</style>
<style>
.hidden_header {
display: none;
}
</style>
you could simply use "bootstrap magic" and add thead-class="d-none" to hide the header row:
<template>
<b-table :items="items" thead-class="d-none" />
</template>
In your fields object add thStyle each column.
fields: [{
key: 'key_here',
label: 'Column Name',
thStyle: {
display: 'none'
}
]
Doesn't look like there is anything in docs to hide the row completely, but you can use CSS to hide it:
table > thead {
display:none !important;
}
The !important flag is to override the default settings.
I have some divs in my HTML which are a bit like that :
<div class="items">
<div class="item1-image-container"></div>
<div class="item2-image-container"></div>
<div class="item3-image-container"></div>
<div class="item4-image-container"></div>
<div class="item5-image-container"></div>
</div>
And each of them has a sass variable for their color, which is :
$item1-color;
$item2-color;
$item3-color;
$item4-color;
$item5-color;
Therefore I want to create a mixin which would add the color to the background of each div. I wrote something like that, which is not working and I don't know how to solve my issue, if I can ever solve it...
#mixin background-color-menu-item($prefix: '') {
.#{$prefix}-picture-container {
background-color: $#{$prefix}-color;
}
}
The sass precompiler tells me that the first dollar in $#{$prefix} is a problem.
DEMO
So you can do what you're trying to do, but you won't get the result you want.
#mixin background-color-menu-item($prefix: '') {
.#{$prefix}-picture-container {
background-color: unquote("$#{$prefix}-color");
}
}
.stuff {
#include background-color-menu-item($item5-color);
}
The unquote function will allow you to prepend the $, but it won't get the value of the variable, just the name of the variable...
.stuff .yellow-picture-container {
background-color: $yellow-color;
}
But you can use a map and iteration to accomplish your goal, if your goal is only to set these values 1 time.
$item1-color: blue;
$item2-color: red;
$item3-color: green;
$item4-color: brown;
$item5-color: yellow;
$items: (
item1: $item1-color,
item2: $item2-color,
item3: $item3-color,
item4: $item4-color,
item5: $item5-color
);
#each $key, $val in $items {
.#{$key}-picture-container {
background-color: #{$val};
}
};
Im trying to do something like this:
<div class="seller_image" :style="{background: url(' + user_credentials.avatar +'); background-size: cover !important; display:block;}">
but i get this error:
Invalid expression. Generated function body: {background:scope.url('
+ user_credentials.avatar +');scope.background-scope.size:scope.cover!scope.important;scope.display:scope.block;}
Any suggestion?
Like this it working but i want to use it like background image:
<img v-bind:src="user_credentials.avatar" alt="Avatar" />
It's easier to put this together inside a computed and use that instead:
new Vue({
el: '#app',
computed: {
getBackground() {
return 'background: url(' + this.user_credentials.avatar + '); background-size: cover display:block;';
}
},
data: {
user_credentials: {
avatar: 'avatar.png'
}
}
})
Then you can use it like so:
<div :style="getBackground"></div>
Here's the JSFiddle:
https://jsfiddle.net/w6agzuen/
The error you are getting is because you need the background value to be a string. Any additional inline styles need to be comma delimited then as well because you are passing an object. Lastly I believe styles like background-size that contain a hyphen need to be camel-cased when binding them so then the final changes to your inline styles should look like this:
<div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover !important', display: 'block'}">