I have a field that I want to restrict allowed character input (keypress and copy/paste).

I only want numbers 0-9 and letters A-F (hex). Other characters will not be allowed to be keyed/pasted.

I currently have something like this:

      <div v-for="(val, index) in obj">
        <q-input outlined v-model="obj[index]" label="Labels" @input="checkChars($event, obj[index])"/>
      </div>

Please note that this will be inside a loop and obj[index] is dynamic. Again, I am passing variable of type 'string', not an object (so cant make use of mutability).

Example if I will key in 12kja, I will only want it to allow 12a

Then this is my javascript code:

checkChars (eventValue, param) {
   var newVal = eventValue.replace(/[^a-fA-F 0-9\n\r]+/g, '')
   console.log('newVal = ' + newVal) // so this prints out 12a correctly

   param = newVal  // update the parameter with new value
   console.log('obj[val1] = ' + this.obj['val1']) // however, this still prints out 12kja
}

How can I make it so that the obj[index] is actually updated and reflect reactively on the q-input text box? Or is there a way to pass obj[index] as a reference?

Codepen:

I have a field that I want to restrict allowed character input (keypress and copy/paste).

I only want numbers 0-9 and letters A-F (hex). Other characters will not be allowed to be keyed/pasted.

I currently have something like this:

      <div v-for="(val, index) in obj">
        <q-input outlined v-model="obj[index]" label="Labels" @input="checkChars($event, obj[index])"/>
      </div>

Please note that this will be inside a loop and obj[index] is dynamic. Again, I am passing variable of type 'string', not an object (so cant make use of mutability).

Example if I will key in 12kja, I will only want it to allow 12a

Then this is my javascript code:

checkChars (eventValue, param) {
   var newVal = eventValue.replace(/[^a-fA-F 0-9\n\r]+/g, '')
   console.log('newVal = ' + newVal) // so this prints out 12a correctly

   param = newVal  // update the parameter with new value
   console.log('obj[val1] = ' + this.obj['val1']) // however, this still prints out 12kja
}

How can I make it so that the obj[index] is actually updated and reflect reactively on the q-input text box? Or is there a way to pass obj[index] as a reference?

Codepen: https://codepen.io/kzaiwo/pen/gOaPYBV?editors=1011

• javascript
• html
• node.js
• vue.js

• Can you create a small demo for this using codesandbox to show the issue happening. That would help us to review the issue in a better way. – palaѕн Commented Apr 15, 2020 at 4:59
• Thanks. I have updated my post with a link to my codepen: codepen.io/kzaiwo/pen/gOaPYBV?editors=1011 – kzaiwo Commented Apr 15, 2020 at 5:27

2 Answers 2

You can fix this issue by just passing the object key index here, instead of its value like:

<q-input outlined v-model="obj[index]" label="Labels" 
    @input="checkChars($event, index)"/>

Then in checkChars() method you can update the object value like:

this.obj[index] = newVal;

So, the full method will look like:

methods: {
  checkChars(eventValue, index) {
    var newVal = eventValue.replace(/[^a-fA-F 0-9\n\r]+/g, '')
    console.log('newVal = ' + newVal) // so this prints out 12a correctly

    this.obj[index] = newVal // update the parameter with new value
    console.log('obj[' + index + '] = ' + this.obj[index])
  }
}

DEMO:

new Vue({
  el: '#q-app',
  data() {
    return {
      obj: {
        "val1": '1',
        "val2": '2',
        "val3": '3',
        "val4": '4',
        "val5": '5',
      }
    }
  },
  methods: {
    checkChars(eventValue, index) {
      console.clear();
      var newVal = eventValue.replace(/[^a-fA-F 0-9\n\r]+/g, '')
      console.log('newVal = ' + newVal) // so this prints out 12a correctly

      this.obj[index] = newVal // update the parameter with new value
      console.log('obj[' + index + '] = ' + this.obj[index])
    }
  }
})

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr/npm/vue"></script>
<script src="https://cdn.jsdelivr/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-md" style="max-width: 300px">
      <div v-for="(val, index) in obj">
        <q-input outlined v-model="obj[index]" label="Labels" @input="checkChars($event, index)"/>
      </div>
    </div>
  </div>
</div>

Here you literally have to assign newVal to this.obj['val1'] to make it work.

In your code, you are assigning the value to a parameter that has a local scope only. What I would like to suggest here is pass the index in checkChars($event, index)

<div v-for="(val, index) in obj">
  <q-input outlined v-model="obj[index]" label="Labels" @input="checkChars($event, index)"/>
</div>

Use this index to target the input field model inside the above function this.obj[index] = newVal;