I need to know if there is any way to capitalize internalization of v-date-picker. I have managed to translate the days of week and months in v-date-picker in vuetify but I need to make the first letter capital. Any help would be appriciated.
What I have made so far:
<v-date-picker :locale="translateDate"
v-model="date"
:max="new Date().toISOString().substr(0, 10)"
#input="getDate" />
...
translateDate() {
let lang = this.$i18n.locale = this.$cookies.get('language')
return lang
}
I have also this functions to capitalize that I can use:
capitalize(str) {
return capitalizeFirstLetter(str);
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
You can achieve this using pure css. Take a loot at text-transform:
.v-date-picker-title__date,
.v-date-picker-header__value button {
text-transform: capitalize;
}
Related
So from the backend I get a array of objects that look kind of like this
ItemsToAdd
{
Page: MemberPage
Feature: Search
Text: "Something to explain said feature"
}
So i match these values to enums in the frontend and then on for example the memberpage i do this check
private get itemsForPageFeatures(): ItemsToAdd[] {
return this.items.filter(
(f) =>
f.page== Pages.MemberPage &&
f.feature != null
);
}
What we get from the backend will change a lot over time and is only the same for weeks at most. So I would like to avoid to have to add the components in the template as it will become dead code fast and will become a huge thing to have to just go around and delete dead code. So preferably i would like to add it using a function and then for example for the search feature i would have a ref on the parent like
<SearchBox :ref="Features.Search" />
and in code just add elements where the ItemsToAdd objects Feature property match the ref
is this possible in Vue? things like appendChild and so on doesn't work in Vue but that is the closest thing i can think of to kind of what I want. This function would basically just loop through the itemsForPageFeatures and add the features belonging to the page it is run on.
For another example how the template looks
<template>
<div class="container-fluid mt-3">
<div
class="d-flex flex-row justify-content-between flex-wrap align-items-center"
>
<div class="d-align-self-end">
<SearchBox :ref="Features.Search" />
</div>
</div>
<MessagesFilter
:ref="Features.MessagesFilter"
/>
<DataChart
:ref="Features.DataChart"
/>
So say we got an answer from backend where it contains an object that has a feature property DataChart and another one with Search so now i would want components to be added under the DataChart component and the SearchBox component but not the messagesFilter one as we didnt get that from the backend. But then next week we change in backend so we no longer want to display the Search feature component under searchbox. so we only get the object with DataChart so then it should only render the DataChart one. So the solution would have to work without having to make changes to the frontend everytime we change what we want to display as the backend will only be database configs that dont require releases.
Closest i can come up with is this function that does not work for Vue as appendChild doesnt work there but to help with kind of what i imagine. So the component to be generated is known and will always be the same type of component. It is where it is to be placed that is the dynamic part.
private showTextBoxes() {
this.itemsForPageFeatures.forEach((element) => {
let el = this.$createElement(NewMinorFeatureTextBox, {
props: {
item: element,
},
});
var ref = `${element.feature}`
this.$refs.ref.appendChild(el);
});
}
You can use dynamic components for it. use it like this:
<component v-for="item in itemsForPageFeatures" :is="getComponent(item.Feature)" :key="item.Feature"/>
also inside your script:
export default {
data() {
return {
items: [
{
Page: "MemberPage",
Feature: "Search",
Text: "Something to explain said feature"
}
]
};
},
computed: {
itemsForPageFeatures() {
return this.items.filter(
f =>
f.Page === "MemberPage" &&
f.Feature != null
);
}
},
methods: {
getComponent(feature) {
switch (feature) {
case "Search":
return "search-box";
default:
return "";
}
}
}
};
I am absolutely new to Vue JS so please forgive me if my question sounds dumb.
I am learning to create string filters in Vue JS. I was able to convert my string to uppercase using following code.
var app=new Vue({
el:'#app',
data:{
message:'hello world',
},
filters:{
uppercase(value){
return value.toUpperCase();
},
}
})
Now I am trying to make a filter to convert my message to Title Case. eg. hello world to Hello World
I have tried many things like:
filters:{
upper(value){
value.toLowerCase().split(' ');
return value.charAt(0).toUpperCase()+value.slice(1);
}
}
But I am unable to create a filter correctly. How can we use a for loop inside Vue JS? Or is there any other way to accomplish the Title Case?
filters: {
titleize(value){
return value.replace(/(?:^|\s|-)\S/g, x => x.toUpperCase());
}
}
Filters/ Mappers, can be simple JS methods who receives some param, apply operation on it and returns a value.
I believe you really don't need a JS method for this,
Try to apply the text-transform CSS style to HTML.
eg: ( text-transform: capitalize );
h1 { text-transform: capitalize; }
<h1>hello world </h1>
Use JS approach when absolutely necessary.
If the value is in uppercase, you can use it this way:
Vue.filter("TitleCase", value => {
return value.toLowerCase().replace(/(?:^|\s|-)\S/g, x => x.toUpperCase());
});
Thanks #skirtle. I used the below code.
filters:{
upper(str){
str = str.toLowerCase().split(' ');
let final = [ ];
for(let word of str){
final.push(word.charAt(0).toUpperCase()+ word.slice(1));
}
return final.join(' ')
}
}
This worked like a charm. :)
I need to return value form LESS Mixin to less CSS attribute. It is simple in SCSS but unable to replicate it in Less. Anyone who can resolve this issue for me. Thanks in advance. Below is the example what I wanted to achieve form LESS Mixin.
In LESS
.rem(#pixel) {
#em: unit(#pixel*0.025,rem);
}
Not able to return this value like in SCSS
In SCSS
#function pxtorem($pixels, $context: 0.0625) {
#return #{$pixels*$context}rem;
}
.div {
font-size: rem(16);
}
output:
.div {
font-size: 1rem;
}
Want to return the value like in SCSS
See Using Mixins as Functions.
I.e. in your case it will be something like:
.pxtorem(#pixels, #context: 1./16) {
return: 1rem * #pixels * #context;
}
.div {
font-size: .pxtorem(8)[];
}
Alright, I have these two divs with a mouseover and they have the same function. Now the problem is that if I mouse over one of them then BOTH shines. How to solve this? So shines one by one when I hover them.
DIVS:
<div class="latestItemBody" #mouseover="shineItemIcon"
#mouseout="shineOff" :style="{background: activeCardBg}">
<div class="latestItemBody" #mouseover="shineItemIcon"
#mouseout="shineOff" :style="{background: activeCardBg}">
Functions:
methods: {
shineItemIcon() {
this.activeCardBg = '#7a00ff';
this.bounce = 'animated bounceIn';
},
shineOff() {
this.activeCardBg = '';
this.bounce = '';
}
The reason why they both "shine" is because you have activeCardBg bound to both of them, which changes the background.
You could add the shine effect with pure CSS like this instead.
// CSS
.latestItemBody:hover {
background-color: #7a00ff
}
If you want to do this with JS, it could be done like this.
// Template
<div
class="latestItemBody"
#mouseover="shineItemIcon"
#mouseout="shineOff">
</div>
<div
class="latestItemBody"
#mouseover="shineItemIcon"
#mouseout="shineOff">
</div>
// Methods
shineItemIcon(e) {
e.target.style.backgroundColor = '#7a00ff';
this.bounce = 'animated bounceIn';
},
shineOff(e) {
e.target.style.backgroundColor = '';
this.bounce = '';
}
pass the div id as parameter to the shineitemicon and shineoff function. depending upon the condition set 'activeCardBg' value. give activecardBg1 to first div and activeCardBg2 to second div.
I have a v-for loop with vue.js on a SPA and I wonder if it's posible to set a variable at the beginning and then just print it everytime you need it, because right now i'm calling a method everytime i need to print the variable.
This is the JSON data.
{
"likes": ["famiglia", "ridere", "caffè", "cioccolato", "tres leches", "ballare", "cinema"],
"dislikes":["tristezze", "abuso su animali", "ingiustizie", "bugie"]
}
Then I use it in a loop:
<template>
<div class="c-interests__item" v-for="(value, key) in interests" :key="key" :data-key="key" :data-is="getEmotion(key)" >
// NOTE: I need to use the variable like this in different places, and I find myself calling getEmotion(key) everythime, is this the way to go on Vue? or there is another way to set a var and just call it where we need it?
<div :class="['c-card__frontTopBox', 'c-card__frontTopBox--' + getEmotion(key)]" ...
<svgicon :icon="getEmotion(key) ...
</div>
</template>
<script>
import interests from '../assets/json/interests.json'
... More imports
let emotion = ''
export default {
name: 'CInfographicsInterests',
components: {
JSubtitle, svgicon
},
data () {
return {
interests,
emotion
}
},
methods: {
getEmotion (key) {
let emotion = (key === 0) ? 'happy' : 'sad'
return emotion
}
}
}
</script>
// Not relevanty to the question
<style lang='scss'>
.c-interests{...}
</style>
I tried adding a prop like :testy="getEmotion(key)" and then { testy } with no luck...
I tried printing { emotion } directly and it doesn't work
So, there is anyway to acomplish this or should i stick calling the method every time?
Thanks in advance for any help.
It's not a good idea to use methods inside a template for non-user-directed actions (like onClicks). It's especially bad, when it comes to performance, inside loops.
Instead of using a method, you can use a computed variable to store the state like so
computed: {
emotions() {
return this.interests.map((index, key) => key === 0 ? 'happy' : 'sad');
}
}
This will create an array that will return the data you need, so you can use
<div class="c-interests__item"
v-for="(value, key) in interests"
:key="key" />`
which will reduce the amount of times the item gets re-drawn.