Does anybody have a full mapping of icons for Font Awesome 5 Regular (Pro) icons to use it in vuetify.js? I could not find it yet. It has to be in this format:
import Vue from 'vue'
import Vuetify from 'vuetify'
const MY_ICONS = {
'complete': '',
'cancel': '',
'close': '',
'delete': '', // delete (e.g. v-chip close)
'clear': '',
'success': '',
'info': '',
'warning': '',
'error': '',
'prev': '',
'next': '',
'checkboxOn': '',
'checkboxOff': '',
'checkboxIndeterminate': '',
'delimiter': '', // for carousel
'sort': '',
'expand': '',
'menu': '',
'subgroup': '',
'dropdown': '',
'radioOn': '',
'radioOff': '',
'edit': ''
}
Vue.use(Vuetify, {
icons: MY_ICONS
})
Ref: https://vuetifyjs.com/en/framework/icons#using-custom-icons
Without this mapping it try to use the Solid (fas) icons.
Thank you.
Related
I am trying to change the users input to lowercase. I know this looks wrong but when I try and type this.email or this.name for the watch it obviously does not work. the v-model is this.email/name accordingly.
What do I need to correct on this
data() {
return {
form: this.$inertia.form({
name: '',
email: '',
password: '',
password_confirmation: '',
birthdate: '',
user_latitude: '',
user_longitude: '',
user_city: '',
user_region: '',
user_country: '',
terms: false,
}),
address: "",
user_address: [],
}
},
watch: {
email(newVal) {
this.form.email = this.form.email.toLowerCase()
},
name(newVal) {
this.form.name = this.form.name.toLowerCase()
}
},
You could try to watch the property path :
watch: {
'form.email'(newVal) {
this.form.email = this.form.email.toLowerCase()
},
or a filter .
I'm new to VueJS.
My component's template and the props are below
<template>
<div>
<label>WorkHours</label>
<div v-for="(data, day) in value.config.workingHours">
<label>{{day}}</label>
<hour-range-selector
:value="[data.timeFrom, data.timeTo]"
class="rangeText"
:mandatory="true"
:placeholder="placeholder"
:full-range="['00:00', '23:59']"
#input="(val) => workingHoursChanged(val, day)"
/>
</div>
</div>
</template>
<script>
import HourRangeSelector from '..../HoursRangeSelector';
export default {
name: 'WorkingDaysSelector',
components: {HourRangeSelector},
props: {
value: {
config:{
workingHours: {
monday: {
available: false,
timeFrom: '',
timeTo: '',
},
tuesday: {
available: false,
timeFrom: '',
timeTo: '',
},
wednesday: {
available: false,
timeFrom: '',
timeTo: '',
},
thursday: {
available: false,
timeFrom: '',
timeTo: '',
},
friday: {
available: false,
timeFrom: '',
timeTo: '',
},
saturday: {
available: false,
timeFrom: '',
timeTo: '',
},
sunday: {
available: false,
timeFrom: '',
timeTo: '',
}
}
}
},
placeholder: {
type: Array,
default: () => (['From', 'To']),
},
},
data() {
return {
fullRange: ['00:00', '23:59'],
};
},
methods:{
workingHoursChanged(val, day){
//IN PROGRESS
}
};
</script>
<style scoped>
</style>
If I run the code, I'm getting
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'workingHours' of undefined"
Am I approaching correctly? Or How do I achieve this?
Props are the data passed from the parent component to the child one, if you want to define local properties you should define them inside the data option like :
export default {
name: 'WorkingDaysSelector',
components: {HourRangeSelector},
props: {
placeholder: {
type: Array,
default: () => (['From', 'To']),
},
},
data() {
return {
value: {
config:{
workingHours: {
monday: {
available: false,
timeFrom: '',
timeTo: '',
},
tuesday: {
available: false,
timeFrom: '',
timeTo: '',
},
wednesday: {
available: false,
timeFrom: '',
timeTo: '',
},
thursday: {
available: false,
timeFrom: '',
timeTo: '',
},
friday: {
available: false,
timeFrom: '',
timeTo: '',
},
saturday: {
available: false,
timeFrom: '',
timeTo: '',
},
sunday: {
available: false,
timeFrom: '',
timeTo: '',
}
}
}
},
fullRange: ['00:00', '23:59'],
};
},
methods:{
workingHoursChanged(val, day){
//IN PROGRESS
}
};
</script>
<style scoped>
</style>
I am trying to do localization with i18n and vue.
I have an object from which I print the field names.
How do I localize the names of these fields in the object itself? I'm trying to do something like this:
export const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'ru',
messages: {
en: {
nameTxt: 'Name',
phoneTxt: 'Phone',
emailTxt: 'Email',
someField1Txt: 'Some Field 1',
someField2Txt: 'Some Field 2',
},
ru: {
nameTxt: 'Имя',
phoneTxt: 'Телефон',
emailTxt: 'Электронный адрес',
someField1Txt: 'Дополнительное поле 1',
someField2Txt: 'Дополнительное поле 2',
}
}
})
data() {
return {
info: [
{
name: this.$t('nameTxt'),
value: '',
pattern: /^[a-zA-Z ]{2,30}$/
},
{
name: this.$t('phoneTxt'),
value: '',
pattern: /^[0-9]{7,14}$/
},
{
name: this.$t('emailTxt'),
value: '',
pattern: /.+/
},
{
name: this.$t('someField1Txt'),
value: '',
pattern: /.+/
},
{
name: this.$t('someField2Txt'),
value: '',
pattern: /.+/
}
],
import i18n from 'VueI18n instance file'
...
data() {
return {
info: [
{
name: i18n.t('nameTxt'),
value: '',
pattern: /^[a-zA-Z ]{2,30}$/
},
...
Just use the t method of the i18n instance.
Subset of Code in .Vue File :
<div v-if="??"></div>
Subset of Code in .Vue File :
data() {
return {
form: {
taken_test: '',
current_income: '',
gmat_score: '',
gpa: '',
graduation_year: '',
gre_score: '',
illiquid_assets: '',
immigration_status: '',
income_1: '',
income_2: '',
income_3: '',
liabilities: '',
liquid_assets: '',
total_mortgage: '',
reports: [],
email: '',
},
errors: {},
}
},
Within the reports array, I have several objects as shown below. For example:
reports: [
{aid_amount: 500, university_id: 1, aid_qualification: 'merit-based' },
{aid_amount: 400, university_id: 2, aid_qualification: 'need-based' },
{aid_amount: 200, university_id: 16, aid_qualification: 'merit-based' },
{aid_amount: 700, university_id: 23, aid_qualification: 'merit-based' },
{aid_amount: 300, university_id: 100, aid_qualification: 'need-based' },
]
I need to display a if at least one of these objects has aid_qualification: 'merit-based'
What is the best way to do this?
I was thinking I could have a computed() variable but I feel like there is a better way to do this and I just don't know how.
I would use a computed property.
<div v-if="hasAidQualification"></div>
computed: {
hasAidQualification() {
return this.form.reports.some(
({ aid_qualification }) => aid_qualification === 'merit-based'
);
}
}
Your instincts are correct. This is a good case for a computed property. You could also use a method or write some logic right in the template, but a computed property is really what you need. Something like:
{
computed: {
hasMeritBased() {
const {reports} = this;
return Boolean(reports.length && reports.filter(r => r.aid_qualification === 'merit-based').length);
},
},
},
I defined an object in data as
export default {
data() {
return {
labelPosition: 'right',
isText: false,
isDate: false,
isExam: false,
isFile: false,
isWrite: false,
stepLists: [],
flowId: '',
txtName: '',
form: {
textName: '',
textPosition: '',
}
the html like this :
when I change the form.textName ,I found it doesn't work
this.$set(this.form, 'textName', temp.name) //not work
this.form={textName:'abc'}
this.form = Object.assign({}, this.form)
//not work
this.$set(this.form,'textName', '---------------------') work well.