CODEWITHSUNDEEP
javascriptvue.js
jdost_26
jdost_26

Reputation: 415

Obtaining value and setting new value using one function for different input fields

Using vue, I have five input fields for different categories. I want to pass each input field into one function, manipulate the value, and then assign the updated value to the original input name.

Issue is, I cannot figure out how to take the value of an input field, perform a function, and assign the revised value to the object associated with the input field.

Edit: Updated code with current efforts

<template>
 <q-input
    v-model="categoryOne"
    name="categoryOne"
    @change="onSelected($event, categoryOne)"
 ></q-input>
 <q-input
    v-model="categoryTwo"
    name="categoryTwo"
    @change="onSelected($event, categoryTwo)"
></q-input>
</template>
</script>
export default {

setup() {
 let categoryOne = ref(null);
let categoryTwo = ref(null);

function onSelected(event, category) {
   //how would I take the input of each category and perform an 
   action that updates the original value? The only way I can figure 
   this out is to do it one-by-one, which seems sloppy and loses a 
  lot 
   of intended functionality.

   if (category === "categoryOne") { categoryOne.value = 
   categoryOne + 2 }
   if (category === "categoryTwo") { categoryTwo.value = 
   categoryTwo + 2 }
   
    }
  }
  </script>

Upvotes: 0

Views: 66

Answers (1)

danh
danh

Reputation: 62676

I think I understand the question to be asking more about how cause two inputs to have side effects on one another, rather than the particulars of computing that side-effect.

The key is that UI controls can be bound bidirectionally to data via v-model. Below, input into one control side-effects the other.

var app = new Vue({
  el: '#app',
  data: {
    valueA: '',
    valueB: '',
  },
  methods: {
    changeA() {
      this.valueB = parseInt(this.valueA) + 2
    },
    changeB() {
      this.valueA = parseInt(this.valueB) + 2
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1></h1>
  <input type="text" v-model="valueA" @input="changeA()">
  <input type="text" v-model="valueB" @input="changeB">
</div>

Looking again after the question edit, maybe it is about the form of the side-effect, avoiding a list of conditionals. Lists of conditions are traditionally described by a series of if and optionally elseif blocks, with a switch. With literal objects and closures, a more succinct option is available.

Here's the snippet using that idea...

var app = new Vue({
  el: '#app',
  data: {
    valueA: '',
    valueB: '',
  },
  methods: {
    change(inputCategory) {
      // closures representing actions
      const actions = {
        one: () => this.valueB = +this.valueA + 2,
        two: () => this.valueA = +this.valueB + 2
      };
      // execute the closure with a given key
      actions[inputCategory]();
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1></h1>
  <input type="text" v-model="valueA" @input="change('one')">
  <input type="text" v-model="valueB" @input="change('two')">
</div>

Upvotes: 1

Related Questions