selectmany.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  10. <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  11. <script>
  12. (window.__goplaidVueComponentRegisters =
  13. window.__goplaidVueComponentRegisters || []).push(function(Vue, vueOptions) {
  14. var vuetify = new Vuetify({
  15. icons: {
  16. iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  17. },
  18. theme: {
  19. themes: {
  20. light: {
  21. primary: "#673ab7",
  22. secondary: "#009688",
  23. accent: "#ff5722",
  24. error: "#f44336",
  25. warning: "#ff9800",
  26. info: "#8bc34a",
  27. success: "#4caf50"
  28. },
  29. },
  30. },
  31. });
  32. Vue.use(Vuetify);
  33. vueOptions.vuetify = vuetify;
  34. });
  35. </script>
  36. <title>vuetify demo</title>
  37. </head>
  38. <body>
  39. <script>
  40. window.__serverSideData__ = {
  41. states: {
  42. Name2: ["react", "jquery"],
  43. }
  44. }
  45. </script>
  46. <div id="app">
  47. <v-app>
  48. <v-content>
  49. <v-progress-linear
  50. :active="isFetching"
  51. indeterminate
  52. fixed
  53. height="2"
  54. ></v-progress-linear>
  55. <v-container>
  56. <vx-selectmany v-field-name='"People"' label="People" add-item-label="add people"
  57. :selected-items='[{id:"1",text:"person 1",image:"https://cdn.vuetifyjs.com/images/lists/1.jpg"},{id:"2",text:"person 2",image:"https://cdn.vuetifyjs.com/images/lists/2.jpg"}]'
  58. :items='[{id:"1",text:"person 1",image:"https://cdn.vuetifyjs.com/images/lists/1.jpg"},{id:"2",text:"person 2",image:"https://cdn.vuetifyjs.com/images/lists/2.jpg"},{id:"3",text:"person 3",image:"https://cdn.vuetifyjs.com/images/lists/3.jpg"}]'>
  59. </vx-selectmany>
  60. <vx-selectmany v-field-name='"RemotePeople"' label="RemotePeople" add-item-label="add people"
  61. :search-items-func='function(val){ return $plaid().eventFunc("hello").query("keyword", val).go() }'
  62. :selected-items='[{id:"1",text:"person 1",image:"https://cdn.vuetifyjs.com/images/lists/1.jpg"},{id:"2",text:"person 2",image:"https://cdn.vuetifyjs.com/images/lists/2.jpg"}]' >
  63. </vx-selectmany>
  64. <button @click='$plaid().form(plaidForm).eventFunc("a").go()'>SEND</button>
  65. </v-container>
  66. </v-content>
  67. </v-app>
  68. </div>
  69. <script src="http://localhost:3080/js/chunk-vendors.js"></script>
  70. <script src="http://localhost:3080/js/app.js"></script>
  71. <script src="http://localhost:3100/js/chunk-vendors.js"></script>
  72. <script src="http://localhost:3100/js/app.js"></script>
  73. </body>
  74. </html>