Vuejs - How to make .js file read value inside .vue file to modify v-text-field behavior dynamically?

Viewed 26

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

0 Answers
Related