Vue.js使用Buefy构建动态表单 如何获取输入值提交至后端

核心问题根因 #

你目前的自定义Input、Select组件没有适配Vue的v-model双向绑定规则，所以父组件写的v-model="element.fieldValue"不会生效，fieldValue不会跟着输入操作同步更新。

修复步骤 #

1. 修改Input.vue组件适配v-model #

Vue2中自定义组件支持v-model需要满足两个条件：

• 接收名为value的prop
• 值变化时向外触发input事件，携带最新值

修改后的Input.vue代码如下：

<template>
  <b-field :label="fieldLabel">
    <b-input
      :name="inputName"
      :type="inputType"
      :maxlength="inputType == 'textarea' ? 200 : null"
      :value="value"
      @input="$emit('input', $event)"
    ></b-input>
  </b-field>
</template>
<script>
export default {
  name: "Input",
  props: {
    // 新增value prop接收父组件v-model传的值
    value: {
      type: [String, Number],
      default: ""
    },
    inputType: {
      type: String,
      required: true,
      default: "text",
    },
    inputName: {
      type: String,
      required: true,
    },
    fieldLabel: {
      type: String,
      required: true,
    }
  }
};
</script>

2. 同理修改Select.vue组件适配v-model #

按照同样规则修改Select组件即可，示例逻辑如下：

<template>
  <b-field :label="fieldLabel">
    <b-select
      :name="selectName"
      :options="options"
      :value="value"
      @input="$emit('input', $event)"
    ></b-select>
  </b-field>
</template>
<script>
export default {
  name: "Select",
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    options: {
      type: Array,
      required: true
    },
    selectName: {
      type: String,
      required: true
    },
    fieldLabel: {
      type: String,
      required: true
    }
  }
}
</script>

3. 优化Home.vue的提交逻辑 #

修改完组件后，你所有输入、选择的内容都会自动同步到offer数组对应项的fieldValue属性中。在getOffer方法中可以直接提取参数提交给后端，示例代码：

getOffer() {
  // 把offer数组转成后端需要的键值对格式
  const submitParams = this.offer.reduce((params, item) => {
    params[item.fieldName] = item.fieldValue
    return params
  }, {})
  // 提交请求示例
  axios.post('/你的后端提交接口地址', submitParams)
    .then(res => {
      // 提交成功后的业务逻辑
    })
    .catch(err => {
      // 错误提示逻辑
    })
}

另外你现在Home.vue中给组件同时写了v-model和:value是冗余的，去掉:value="element.fieldValue"即可，v-model已经包含了值绑定的逻辑。

内容的提问来源于stack exchange，提问作者İ.Emre Akbaki