Using get and set on a data property object - VueJS

Question

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.

this.$store.getters.getPersons() 👈 getters aren't usually called as functions. Are you sure it's not meant to be const persons = this.$store.getters.getPersons. See vuex.vuejs.org/guide/getters.html#property-style-access — Phil
– Phil, Commented Nov 1, 2018 at 3:32
v-for="person in persons" 👈 you have no data or computed property persons. — Phil
– Phil, Commented Nov 1, 2018 at 3:35
Sorry question has been edited to protect my actual code. But this is the summary of what I wanted to happen. — The Bassman
– The Bassman, Commented Nov 1, 2018 at 5:31

tony19 · Accepted Answer · 2022-07-15 04:39:29Z

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

Collectives™ on Stack Overflow

Using get and set on a data property object - VueJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related