javascript - 在 vue 事件中将参数作为引用传递 (@input)

Question

我有一个字段，我想限制允许的字符输入(按键和复制/粘贴)。

我只需要数字 0-9 和字母 A-F(十六进制)。不允许键入/粘贴其他字符。

我目前有这样的东西:

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

请注意，这将在一个循环内并且 obj[index] 是动态的。同样，我传递的是“字符串”类型的变量，而不是对象(因此不能利用可变性)。

例如，如果我输入 12kja，我只希望它允许 12a

然后这是我的javascript代码:

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
}

我怎样才能使 obj[index] 实际更新并 react 地反射(reflect)在 q-input 文本框上？或者有没有办法将 obj[index] 作为引用传递？

代码笔: https://codepen.io/kzaiwo/pen/gOaPYBV?editors=1011

Answer 1

您可以通过在此处传递对象键 index 而不是其值来解决此问题，例如:

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

然后在 checkChars() 方法中，您可以像这样更新对象值:

this.obj[index] = newVal;

因此，完整的方法如下所示:

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])
  }
}

演示:

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.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/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>