I'm a rookie with vue.js, so apologies in advance if this question has been answered here before
I've this rules.js file. Inside, there's a rule i wanna modify (below). Please note i've truncated the code to only the relevant portions of it:
const rules = {
moneyRules () {
const rules = []
const secondRule =
v => this.validatorMoney(v) || 'ERROR!'
rules.push(secondRule)
return rules
},
validatorMoney (value) {
if (value === null) {
return false
}
value = value.replace(/[^0-9]/g, '')
value = parseFloat(value)
value = value / 100
let id
if (id == 2) {
return (value >= 500 && value <= 30000)
} else if (id == 5) {
return (value >= 5000 && value <= 150000)
} else if (id == 6 || id == 7) {
return (value >= 30000 && value <= 3000000)
} else if (id == 8) {
return (value >= 600 && value <= 100000)
}
else {
return (value >= 500 && value <= 3000000)
}}
export default rules
The id in validatorMoney() needs to be read dynamically. The value i wanna read is selectedModality.id.The rules are imported and used inside SecondFormSimulationDesktop.vue
<v-text-field
outlined
solo
name='simulationValue'
id='simulationValue'
v-model.lazy='valueSimulation'
v-money="money"
:rules='moneyRules'
required
ref='input'
>
</v-text-field>
import Rules from '@/lib/rules.js'
export default {
data () {
return {
selectedModality: null,
selectecModalityDescription: null,
valueSimulation: 'R$ 500,00',
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
precision: 2,
masked: false /* doesn't work with directive */
},
modalityRules: Rules.modalityRules(),
purposeRules: Rules.purposeRules(),
moneyRules: Rules.moneyRules()
}
},
Still in SecondFormSimulationDesktop, selectedmodality.id is generated here:
watch: {
selectedModality (value) {
if (value) {
let data = this.getData
let id
if (i.name === value) {
id = i.id
}
}
if (id === 2) {
this.selectecModalityDescription = 'description'
} else if (id === 5) {
this.selectecModalityDescription = 'description2'
}
else {
this.selectecModalityDescription = 'description5'
}
}
},
getResultSimulation (value) {
if (value) {
this.$emit('updateToThirdForm', [
this.selectedModality,
//other values are passed here
value.modality
])
}
},
SecondFormSimulationDesktop and updateToThirdForm are imported and used, in turn, by simulation.vue
import SecondFormSimulationDesktop from '../forms/Simulation/SecondFormSimulationDesktop.vue'
import SecondFormSimulationMobile from '../forms/Simulation/SecondFormSimulationMobile.vue'
export default {
data () {
return {
selectedModality: null,
//other values here
}
}
},
components: {
SecondFormSimulationDesktop,
SecondFormSimulationMobile
},
computed: {
...mapGetters({
carouselSimulation: 'dataFrontPage'
}),
isMobile() {
return screen.width < 600
}
},
methods: {
updateToThirdForm (value) {
this.selectedPurpose = value[0]
this.selectedModality = value[1]
//rest of values passed here
},//rest of code
The purpose of this modification of rules.js is so that the text field will return a error if the values are too low or too high for the chosen modality (link to image; in this case,it should've showed an error if the value is below 600 and above 100 thousand)
Can anyone point me to a solution to this problem? Any resources i can use inside of vue.js or javascript to make sure it shows an error everytime the values are too low or high? Thank you in advance