Javascript 在vue事件（@input）中将参数作为引用传递

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

我只想要数字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]

实际更新并在

q-input

文本框中反应？或者是否有方法将

obj[index]

作为参考传递

代码笔：

---

您可以通过在此处传递对象键

索引来解决此问题，而不是传递其值，如：

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

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

演示：


newvue({
el:“#q-app”，
数据（）{
返回{
obj：{
“val1”：“1”，
“val2”：“2”，
“val3”：“3”，
“val4”：“4”，
“val5”：“5”，
}
}
},
方法：{
检查字符（事件值、索引）{
console.clear（）；
var newVal=eventValue.replace（/[^a-fA-F 0-9\n\r]+/g'，）
log（'newVal='+newVal）//这样就可以正确地打印出12a
this.obj[index]=newVal//使用新值更新参数
console.log（'obj['+index+']='+this.obj[index]）
}
}
})
在这里，您必须将
newVal
分配给
this.obj['val1']
，才能使其正常工作

在代码中，将值指定给仅具有局部作用域的参数。这里我想建议的是在
checkChars（$event，index）



使用此索引以上述函数内的输入字段模型为目标
this.obj[index]=newVal
 您可以使用codesandbox为此创建一个示例来显示发生的问题。这将有助于我们更好地审查这个问题。谢谢。我已经更新了我的帖子，并添加了我的代码笔链接：
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])
  }
}

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