用另一个输入值更改输入名称

Question

我的论文使用 Vue.js 2，我需要通过将该特定值写入另一个输入来设置每个输入值。

我尝试了一些

v-model

黑客，但我无法达到我想要的结果。 这是我到目前为止所拥有的：

下面的代码是在 for 循环中生成的代码片段：

<div class="uk-flex uk-flex-between uk-margin-small-bottom" style="align-items: center">
    <input  v-model="box-'+this.index+'-input-'+this.counter+'"
            class="uk-input uk-margin-small-right uk-width-expand"
            type="text"
            :name="box-'+this.index+'-input-'+this.counter+'"
            placeholder="Text"
            aria-label="">
    <a uk-toggle="target: #modal-'+this.index+'-input-'+this.counter+'"
       class="uk-icon-link"
       uk-icon="icon: pencil; ratio: 1.2"
       style="color: #39f"></a>
</div>
<div id="modal-'+this.index+'-input-'+this.counter+'" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <input v-model="box-'+this.index+'-input-'+this.counter+'"
               class="uk-input uk-margin-small-right uk-width-expand"
               type="text"
               aria-label="">
    </div>
</div>

我想要实现的目标： 当上面的代码第一次生成时，它有

box-0-input-1

id。我想通过从第二个输入（模态内部）获取值来更改第一个输入的名称，这样当我提交所有输入时，我可以：

'名字' => '约翰'

而不是

'box-0-input-1' => '约翰'

其他一切都已完成，这是唯一的障碍。

Answer 1

v-model 必须是一个变量来保存输入的值。如果第二个输入的 v-model 将其值绑定到某个变量，则您可以使用该变量来设置不同输入的

name

属性，我相信这就是您所要求的。

首次输入

<input
  v-model="inputVal"
  type="text"
  :name="firstInputName"
  placeholder="Text"
/>

第二个输入

<input
  v-model="firstInputName"
  type="text"
/>

脚本代码：

export default {
  data() {
    return {
      firstInputName: '',
      inputVal: ''
    }
  }
}