经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
Play vue.js with constant value in SailsJS
来源:cnblogs  作者:Bo Schwarzstein  时间:2018/10/8 9:07:15  对本文有异议

SailsJS supplies a utility module called parasails, which defines two elements, <ajax-form> and <ajax-button> to allow user to create AJAX form easily.

In the most cases, the user could define a form as this in SailsJS

HTML

  1. <ajax-form action="submitSomething"
  2. :cloud-error.sync="cloudError"
  3. :handle-parsing="handleParsingForm"
  4. @submitted="submittedForm()">
  5. <input type="text" v-model="someInput" >
  6. <ajax-button type="submit" :syncing="syncing" class="btn btn-dark">Submit Something</ajax-button>
  7. </ajax-form>

JS

 

  1. parasails.registerPage('test-page', {
  2. // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  3. // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
  4. // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  5. data: {
  6. // Main syncing/loading state for this page.
  7. syncing: false,
  8. // Form data
  9. formData: { /**/ },
  10. // For tracking client-side validation errors in our form.
  11. // > Has property set to `true` for each invalid property in `formData`.
  12. formErrors: { /**/ },
  13. // Server error state for the form
  14. cloudError: '',
  15. },
  16. // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
  17. // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
  18. // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
  19. beforeMount: function() {
  20. // Attach raw data exposed by the server.
  21. _.extend(this, SAILS_LOCALS);
  22. },
  23. mounted: async function() {
  24. //
  25. },
  26. // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
  27. // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
  28. // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
  29. methods: {
  30. handleParsingForm: function() {
  31. var argins = this.formData;
  32. return argins;
  33. },
  34. submittedForm: async function() {
  35. // Executed after submission.
  36. },
  37. }
  38. });

Once user clicks the button, the two callback functions would be executed, the function handleParsingForm takes the data from the form, and submittedForm is the callback after success.

How about we want to do a dynamic form which sends the dynamically generated constant data from the server at page, and send it to the form again ?

Change the HTML to this.

  1. <button type="submit" class="btn" v-on:click="setValue(someValue)">Submit</button>

Here we use default button and set the callback to event v-on:click, and once button was clicked, it runs the function setValue to call the JavaScript function. What we have to do in the JavaScript is add new function.

  1. methods: {
  2. setValue: function (someValue) {
  3. this.formData.someValue = someValue;
  4. },
  5. }

So easy to pass the data into the form.

Thanks.

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号