将动态表单字段与 v-model 绑定时出现问题

Question

我正在尝试准备一个动态表单，它根据数据库中存在的列生成一个表单 table。每个表单字段都基于数据库中存在的列 table。

import { mapGetters } from 'vuex'
export default {
  name: 'NewRecord',
  data () {
    return {
      columnName: {

      }
    }
  },
  computed: {
    ...mapGetters(['columns'])
  },
}

我正在使用 mapGetters 从状态中提取列。列的结构是：

[ 
{ "name": "id", "type": "varchar(255)", "label": "Id", "align": "left", "field": "id", "sortable": true, "__iconClass": "q-table__sort-icon q-table__sort-icon--left", "__thClass": "text-left sortable", "__tdClass": "text-left" }, 
{ "name": "username", "type": "varchar(80)", "label": "Username", "align": "left", "field": "username", "sortable": true, "__iconClass": "q-table__sort-icon q-table__sort-icon--left", "__thClass": "text-left sortable", "__tdClass": "text-left" } 
{.......
.......}
]

我正在通过以下代码生成表单：

<div class='columns row'>
<div class='col-3'
       v-for='col in columns'
       :key='col.name'>
<input standard type='text' :label='capital_letter(col.label)'
v-model="col.name"></input>
</div>
</div>

如何使用数据属性中的 v-model="col.name" 进行双向绑定。非常感谢任何帮助。

Answer 1

要在循环中管理两种方式绑定到状态，我认为您需要避免使用 v-model。相反，您可能想在更改事件上调用突变。所以您的输入将如下所示：

<div class='col-3' v-for='(col, index) in columns' :key='col.id'>
<input
  standard
  type='text'
  :label='capital_letter(col.label)'
  :value="col.name"
  @input="changeColumn($event, index)"
>
</div>

请注意，我们从循环中传入索引，因此您可以在下面的方法中定位适当的列。然后，在方法中：

changeColumn(event, index) {
    this.$store.commit('updateColumn', {i: index, value: event.target.value})
}

然后，使用有效负载对象，更改商店中的适当列（将其放入商店的 mutations 中）：

updateColumn(state, payload) {
    state.columns[payload.i].name = payload.value
}

请记住，在您看来，您还需要“...mapMutations(['updateColumn'])”等...

您可以在 Vuex 文档中阅读更多关于 v-model with the state 的信息： https://vuex.vuejs.org/guide/forms.html

将动态表单字段与 v-model 绑定时出现问题

Issue while binding the dynamic form field with v-model

javascript

vue.js

v-model