CODEWITHSUNDEEP
javascriptvue.js
The Bassman
The Bassman

Reputation: 2361

Using get and set on a data property object - VueJS

From what I know VueJS has a way to use a getter and setter for their computed properties per this documentation on Computed property.

I have here the vue component where you can see the amount is an object and we have a group of persons from the vuex store.

data() {
  return {
    form: {
      amounts: {},
    },
  };
},
mounted() {
  const persons = this.$store.getters.getPersons()
  persons.forEach((person) => {
    this.$set(this.form.amounts, person.id, '0.00');
  });
},

I made it so I can associate a person to the amount he has paid on the form by linked it using the ID and the payment. This is an example of what this.form.amounts should look like.

{'HKYDUPOK': 0.00},
{'RYYJPUKA': 0.00},
{'KZMUYTAK': 0.00}

Now by default, their values should be 0.00, on the input number field where they entered the amount, by default I applied them to v-model which looks like this:

<div v-for="person in persons">
  <input
    class="form-control"
    v-model="form.amounts[person.id]"
    type="number"
    step=".01"
    min="0"
    required>
  </input>
</div>

But here is the thing, when you open your code snippet on the browser, you notice that the input number field has the default value of 0.00 which acts as somewhat a placeholder. I wanted to remove the default value of 0.00 on the number input and have it instead to an empty input yet the underlying value of the amounts per person is not null but still 0.00 or 0. This is so that the form is clear of input when the user tries to input values on the input box instead of having to erase and replace 0.00 with an actual value (Hope this is clear). Now there is a possibility that on the total amount, there are at least 1 or more persons with an amount of 0. I wanted to make sure that an empty input number field does not result in null but instead, it's 0. Is this possible?

I tried checking the computed property getter and setter for this to change the default binding yet how do you map the form.amounts to match the amount to its corresponding person? On the Get, if the value is not more than 0.00 or 0, then return an empty value to the input field. Set is the bigger problem for it only accepts one parameter which is called newValue and would be hard to say pass the personId to map the amounts to the corresponding person. Is there a way to touch upon and manipulate the binding of a data property which is an object yet also change the default behavior on the model to return empty instead of 0.00? I hope my question is clear enough.

Upvotes: 1

Views: 7022

Answers (1)

Phil
Phil

Reputation: 164795

I assume this is a follow on from your previous question...

At this stage, you're best creating a component to represent your data input element.

Something like this (using a single-file component example)

<!-- number-input.vue -->
<template>
  <input class="form-control" type="number" 
         step=".01" min="0"
         :value="amount"
         @input="updated"
         required />
</template>
<script>
export default {
  name: 'NumberInput',
  props: {
    value: Number
  },
  computed: {
    amount () {
      return this.value || ''
    }
  },
  methods: {
    updated ($event) {
      this.$emit('input', parseFloat($event.target.value) || 0)
    }
  }
}
</script>

Then you can use it in your parent template

<div v-for="person in persons" :key="person.id">
  <NumberInput v-model="form.amounts[person.id]" />
</div>

Just remember to import and use the component...

<script>
import NumberInput from 'number-input'
export default {
  components: { NumberInput },
  // etc
}
</script>

JSFiddle Demo

Also see https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Upvotes: 1

Related Questions