传递参数作为 vue 事件中的引用 (@input)答案

【问题标题】：Pass parameter as reference in vue event (@input)传递参数作为 vue 事件中的引用 (@input)
【发布时间】：2020-07-27 23:58:28
【问题描述】：

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

我只想要数字 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] 实际更新并在q-input 文本框上反应性地反映？或者有没有办法传递obj[index] 作为参考？

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

【问题讨论】：

您能否为此使用代码框创建一个small demo 来显示正在发生的问题。这将有助于我们以更好的方式审查问题。
谢谢。我已经用我的 codepen 的链接更新了我的帖子：codepen.io/kzaiwo/pen/gOaPYBV?editors=1011

标签： javascript html node.js vue.js

【解决方案1】：

在这里，您实际上必须将 newVal 分配给 this.obj['val1'] 才能使其工作。

在您的代码中，您将值分配给仅具有本地范围的参数。我想在这里建议的是通过checkChars($event, index)中的索引

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

使用该索引定位上述函数this.obj[index] = newVal内的输入字段模型；

【讨论】：

【解决方案2】：

您可以通过在此处传递对象键 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>

【讨论】：