上記の手順は正しいですが、不足しているのは、送信された関数にgiveパラメーターを設定する必要があることだけだと思います。 vueテンプレートの小道具として、($ event)を渡します。ページスクリプト(page-name.page.js)では、送信された関数を定義する場所で、パラメーターに任意の名前を付けることができます。
必要なようには思えませんが、Sails.jsのajax-form関数で問題が発生した場合に備えて、ここで完全な例を示します。
テンプレート(html)内:
<ajax-form
action="<camelcase of the file for your action>"
:handle-parsing="parseForm"
:submitted="submittedForm($event)"
@rejected="rejectedForm($event)"
:form-data="formData"
:form-rules="formRules"
:form-errors.sync="formErrors"
:cloud-error.sync="cloudError"
>
<input type="text" id="input1" v-model="input1">
ここでは、form-data
データが保存されるオブジェクトを参照します。キーは、特定の入力に対してv-model' as for a given input.
form-rules is where you specify an object of objects. They key of each is the input name from
からの入力名です。 v-model and the value can be a string or array of strings for the rules set.
form-errors specifies an object where errors will go if the form triggers any errors upon submission. If this happens, data does not get sent to the server and neither the submitted or rejected function get run.
cloud-error.sync`は、アクションが200以外の応答を返した場合にバックエンドエラーが発生するオブジェクトを指定します。
ページスクリプト(page-name.page.js):
data: {
formData: {},
formErrors: {},
formRules: {
input1: 'required'
},
cloudError: ''
},
methods: {
parseForm: function () {
// You can do parsing and custom validations here, but return all data
// you want to send to the server as an object called 'argins'
return argins;
},
submittedForm (data) {
// Here you can use any data that is returned from the action, like
console.log('returned data: ', data);
},
rejectedForm (err) {
// This function runs if the server returns a non-200 response
console.log(err);
}
}