Question

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

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。相反，您可能想在change事件上调用一个突变。因此您的输入将如下所示：

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

然后，使用有效负载对象，更改商店中的相应列（将其放入商店中的突变中）：

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

请记住，在您的视图中，您还将需要“ ... mapMutations（['updateColumn']）”等...

您可以在Vuex文档中了解有关带有状态的v模型的更多信息： https://vuex.vuejs.org/guide/forms.html

将动态表单字段与v模型绑定时出现的问题

1 个答案: