Question

美好的一天。我正在使用Vue.js从组件中的数据中呈现任意个选择元素。

这里的示例JSON数据表明存在两个选择元素，每个选择元素具有一个或多个选项。

{
   "dropdowns":[
      {
         "cd":"UG9ydGZvbGlv",
         "formname":"sp_filter_UG9ydGZvbGlv",
         "nm":"Portfolio",
         "selected":"1a",
         "options":[
            {
               "cd":"1a",
               "val":"Option 1A"
            }
         ]
      },
      {
         "cd":"UHJvZHVjdCBOYW1l",
         "formname":"sp_filter_UHJvZHVjdCBOYW1l",
         "nm":"Product Name",
         "selected":"2b",
         "options":[
            {
               "cd":"2a",
               "val":"Option 2A"
            },
            {
               "cd":"2b",
               "val":"Option 2B"
            }
         ]
      }
   ]
}

以下是模板HTML：

<form>
   <div v-for="dropdown in dropdowns">
      <div v-if="dropdown.availableToView">
         <h4>{{dropdown.nm}}</h4>
         <select v-model="dropdown.selected" v-on:change="triggerUpdate">
            <option value="">(Make a selection)</option>
            <option v-for="option in dropdown.options" :value="option.cd">{{option.val}}</option>
         </select>
      </div>
   </div>
</form>

到目前为止，一切都很好。

我已经加载了数据，Vue正在构建下拉列表。

当用户更改任何选择框时（请记住可以有任意数量的选择框），触发操作需要通过ajax提交表单中的所有元素。听起来，最正确的选择是将表单字段绑定到基础组件数据，就像我所做的那样。

我的triggerUpdate看起来像这样：

methods: {
    triggerUpdate: function() {       
        axios({
                method: "post",
                url: actionURL,
                data: this.dropdowns
            })
            .then(response => (this.data = response));
    }
}

...但是这将提交整个下拉列表数据元素，包括每个选择框中的所有选项。不必发送所有选项。我只想发送每个字段名称及其选择的选项（即“值”）。

我知道我可以序列化整个表单，并使其成为我的ajax有效负载。但这似乎正在围绕Vue.js进行“终结”。每个人都在谈论将表单字段绑定到Vue模型...在发出旨在更新模型的ajax请求时，基本上忽略该模型是否正确？

我是Vue.js的新手，所以我很乐意为您提供帮助。我应该如何从（a）形式使用正确的Vue.js绑定中发送数据，以及（b）在不发送无关数据的情况下发送数据？

感谢您的时间。

Answer 1

如果只需要发布选定的值，并将其存储在每个dropdown的{{1}}属性中，明智的方法似乎就是将其映射到简单的名称/值数组对象。

尝试以下操作（假设每个字段的名称均为selected属性，如果不是，则可以将其替换）：

formname

然后，您在ajax请求中发送var submitData = this.dropdowns.map((dropdown) => { return { name: dropdown.formname, value: dropdown.selected }; });。

Vue.js：绑定选择框，但不想将所有选项都ajax

1 个答案: