How to assign input data to another variable in vue

Question

Here is what I have:

<template>
    <div>
        <input v-model.number="money">
        <p>{{money}}</p>
    </div>
</template>

<script>
name: 'MyComponent',
  data () {
    return {
        money: 0
    }
  }
</script>

After getting the input value, if I change the value of money in data by some methods , how can I get the original input value? Is it a good practice? Should I assign the input value to another variable?

If by change money in data by some methods means returns a value that is based on money property, you can use computed property in Vue. — Mengo
– Mengo, Commented Oct 3, 2018 at 23:09
It's ideal that there is a way to make a duplicate of the input value of money — JackJack
– JackJack, Commented Oct 4, 2018 at 0:12
Why do you want to make a duplicate of the input value of money? If you want to display something which value is calculated by money like {{ computedMoney }}, you can do it as Michael suggested. vuejs.org/v2/guide/computed.html — Mengo
– Mengo, Commented Oct 4, 2018 at 0:30
In fact, I want to get an input value and use it as the length of an array. I have a reduceLength method for reducing the length of the array, that's why I want a duplicate — JackJack
– JackJack, Commented Oct 4, 2018 at 0:39

Michael Rush · Accepted Answer · 2018-10-03 23:22:05Z

1

It really depends on what you are trying to do. As Mengo commented above, you can keep the original value and then also have a computed value based on the input value by doing something like this:

  data: {
    money: 0
  },
  computed: {
    computedMoney() {
      return this.money + this.money * 0.0825;
    }
  }

See working example here: https://codepen.io/anon/pen/VEajJK

answered Oct 3, 2018 at 23:22

Michael Rush

4,3994 gold badges29 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JackJack Over a year ago

Thank you for answers. I have methods for modifying the value of money, but I don't need those methods to return anything, just change the value of money without affecting the original input.

Mengo · Accepted Answer · 2018-10-04 00:55:08Z

0

It'll be too long for a comment, so I'll put my answer here. Based on my understanding of your goal.

data: {
  lengthInput: 0,
  original: [1,2,3],
},
computed: {
  calculated() {
    return this.original.slice(this.lengthInput);
  }
}

Then you can access the result as this.calculated or <li v-for="i in calculated" :key="i">{{ i }}</li> in template

answered Oct 4, 2018 at 0:55

Mengo

1,2971 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to assign input data to another variable in vue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related