如何使用内置的vue和ajax表单在sails.js中实现多选？
在Sails.js中使用内置的Vue和Ajax表单实现多选，可以按照以下步骤进行：
- 首先，确保已经安装了Vue.js和Sails.js，并创建了一个新的Sails.js项目。
- 在Sails.js项目的前端目录中，创建一个新的Vue组件，用于实现多选功能。可以使用Vue的内置指令
v-model来实现数据的双向绑定。 - 在Vue组件中，创建一个多选框列表，并使用
v-model指令将选中的值绑定到Vue实例的数据属性中。 - 在Vue组件中，使用Ajax来获取多选框列表的选项数据。可以使用Vue的生命周期钩子函数
created来在组件创建时发送Ajax请求。 - 在Sails.js的后端代码中，创建一个路由来处理前端发送的Ajax请求。可以使用Sails.js的内置的
req和res对象来处理请求和发送响应。 - 在路由处理函数中，根据请求的类型（GET或POST）来执行相应的操作。对于GET请求，可以查询数据库或其他数据源来获取多选框列表的选项数据，并将其作为响应返回给前端。对于POST请求，可以处理前端发送的选中值，并执行相应的逻辑。
- 在前端的Vue组件中，使用Axios或其他Ajax库来发送Ajax请求，并处理后端返回的响应数据。
- 最后，将Vue组件渲染到Sails.js的视图中，以便在浏览器中显示多选功能。
总结：
使用内置的Vue和Ajax表单在Sails.js中实现多选的步骤包括创建Vue组件、使用v-model指令实现数据绑定、使用Ajax获取选项数据、创建后端路由处理Ajax请求、处理前端发送的选中值等。具体实现细节可以根据项目需求进行调整和扩展。
腾讯云相关产品推荐：
- 云服务器（ECS）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
- 腾讯云直播（CSS）：https://cloud.tencent.com/product/css
相关·内容
我想使用sails.js、mongodb和waterline创建分页表。
在sails.js中有什么特定的分页方法吗？
浏览 3提问于2014-10-30得票数 23
回答已采纳
我有以下几点：
html：
<div data-ajaxdiv="sidebar__blog"></div>
<div data-ajaxdiv="content__blog_posts"></div>
等等。
jquery：
window.onload = gatherajaxdivs;
function ajaxdiv(element){
$.ajax({
type: 'post',
data: {
action:
浏览 2提问于2018-10-03得票数 0
我只想在我的项目中使用maven，但我想让3个按钮和1个信息框的小单页应用程序。我可以包括像vue.js这样的axios吗？我下载了Vue.js文件，并在Index.html的<scrypt>中写入了路径。我不想用npm，纱线，webpack或者其他的东西。也许我可以用其他东西，而不是Axios？
浏览 3提问于2020-03-19得票数 0
我有两个表单在同一个页面，第一个表单将有email，name，password等。
在第二种形式中，有qualification、skills、institution等。
我会将第一个表单中的数据添加到一个表中。我想从第一个表单中获取数据的ID，并在另一个表中添加qualifications、skills和institution以及第一个表单中的ID。
我正在用php做这件事。请告诉我如何实现这一点。
浏览 2提问于2018-08-10得票数 0
我是Sails.JS的新手，想在我的视图中使用Vue.JS (每个.ejs都有一个脚本)，但我不知道正确的方法。如果我在视图的末尾创建一个脚本标记，则会抛出一个错误，因为Vue.JS尚未加载。因此，我在assets中创建了一个文件夹来保存我所有的.js文件，现在我不知道如何导入Vue-Resource而不会收到这个错误：Cannot read property 'get' of undefined.
我已经检查过这个：，但仍然没有成功。
谢谢你的帮忙!
浏览 3提问于2018-08-25得票数 2
1回答
我有一个Sails.js服务器和一个Vue Webpack应用程序分别运行。以下是我的文件夹结构：
/application-root/server/
/application-root/client/
/server/文件夹包含我的Sails.js应用程序和/client/包含我的Vue Webpack应用程序。
我不想分开招待这两个人。我希望能够只部署服务器并使其能够使服务器呈现Vue Webpack应用程序。我知道Sails使用.ejs作为模板引擎。
如何呈现我的Vue.js应用程序而不是Sails使用的默认.ejs模板？
我尝试了一些解决方案，如等，但它们都带来了一些妥
浏览 0提问于2018-05-07得票数 2
2回答
我有一个使用multiselect的Vue应用程序，我想让它有5个选项(a，b，c，d，e)，用户最多可以选择3个。我检查了文档，这似乎不是一个受支持的参数，因为它提到的限制只是限制了选择后可以访问的数量。 以下是我当前的代码，但它不能执行我想要的操作 数据： selectedOptions: [],
optionsLimit: 3,
optionsList: ["a","b","c","d","e",] 模板： <multiselect v-model="selectedOptions"
浏览 57提问于2020-10-02得票数 1
回答已采纳
1回答
VueJS表单与输入事件
、、、、
我有一个表单，我正在尝试捕获提交事件，以防用户在文本输入中按enter键。
在我尝试捕捉按钮单击并阻止默认操作之前，这种方法工作得很好。
我希望能够以不同的方式处理输入中的按钮单击和enter键-但该按钮覆盖了表单的submit.prevent方法。
参见下面的示例，第一个文本字段和按钮触发"one event“，但第二个表单在按钮上有一个事件，但这覆盖了表单提交。
我希望输入中的enter键将标题设置为"two events“，而按钮将标题设置为"double”
是不是和这件事有关？
var myApp = new Vue({
'el' : &#
浏览 15提问于2017-06-28得票数 2
回答已采纳
1回答
vue.js多选错误
、、、
我在这个错误中搜索了2天，尝试了许多方法，但都没有效果，我不知道这个错误或者什么，也没有结果，我使用的是vue.js版本2.1.10和laravel 5.4。我的template.vue
<template>
<div>
<multiselect v-model="value" :options="options">
</multiselect>
</div>
</template>
<script>
import Vue fr
浏览 2提问于2017-03-27得票数 0
我将sails.js 1.0与vue.js结合使用，并希望创建一个包含基于用户偏好的动态输入量的动态表单。因此，用户应该能够添加另一个输入，输入数据并发送包含动态数据量的完整表单。
我的表格是这样的：
<ajax-form action="addStuff" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()" :handle-parsing="handleParsingForm">
...
浏览 0提问于2018-04-19得票数 4
回答已采纳
嗨，我正在开发我的网站，希望我的登录表单在弹出窗口上，因为我被卡住了，因为我的弹出窗口上运行我的php脚本后关闭。由于这一点，我无法在同一弹出窗口中回显错误消息(如不正确的密码和用户已存在)。
我正在通过简单的php使用php 5.4，由于同样的问题，我最终创建页面而不是弹出窗口，谁能帮助我演示，以了解如何工作
浏览 0提问于2016-04-19得票数 0
我有一个Vue 2应用程序，它使用一个对象数组来支持提供的搜索/多选择小部件。
我看过上的Vue 12迁移指南，但是他们给出的示例没有将参数从DOM元素传播到业务逻辑。
现在，select会通过每次击键来改变事件，但是我想控制这个事件(EG和lodash#throttle)，所以我不会每隔几毫秒就按一次API。
import {mapGetters} from 'vuex';
import { throttle } from 'lodash';
import Multiselect from 'vue-multiselect'
export
浏览 0提问于2018-04-20得票数 5
回答已采纳
我用Vue.js做了一个应用程序，我正试图在Nuxt.js中适应它。对于滚动间谍，我在Vue.js中使用了Vue.js，所以我希望在Nuxt.js中也这样做。
有点像在Vue.js main.js文件中导入main.js一样，我在Nuxt中创建了一个插件来添加jQuery和require("jquery.easing")：
plugin/jqueryeasing.js
import Vue from "vue";
import jquery from "jquery";
require("jquery.easing");
Vu
浏览 4提问于2019-02-21得票数 2
在之后，我编写了一个Vue组件，它包含以下逻辑：
import debounce from 'lodash/debounce'
export default {
[...]
created () {
this.debouncedOnSubmit = debounce(this.doSubmit, 1000)
},
[...]
这背后的想法是，我的表单在表单提交时调用debouncedOnSubmit方法：
<button
name="order-basket"
type=&#
浏览 3提问于2020-04-28得票数 5
6回答
如果页面正在重新加载，有没有办法检测并停止。
我有一个页面，这是重新加载后，成功提交的表单在它的存在。我想要有一个事件侦听器，它可以查看页面是否正在重新加载，并应该阻止它重新加载。
我不能return false;成功提交注册表
浏览 0提问于2014-11-19得票数 1
我是sails.js的新手。我想从一个表中选择所有记录。如何使用.find()。
特别是水线怎么知道我想要哪张桌子的数据？因为我们在模型中没有提到任何表名。我知道有.query()。但是，在水线基本创建/更新/查找/删除方法中，这是可能的吗？
另一个问题是如何在sails.js中使用表名的前缀？就像我想使用sails_product作为表名一样。
浏览 2提问于2015-08-27得票数 1
回答已采纳
1回答
你好，请看一下。它是用Vue 0.12版本和编写的。如何使它与vue2版本一起工作。我真的需要这个指令，而不是组件。
`<div id='search`-results'>
Vue model value <br>
{{city | json}}
<hr>
Select value:
<!-- note the `v-model` and argument for `v-chosen` -->
<select class="cs-select" v-model="city" options
浏览 1提问于2017-05-31得票数 0
回答已采纳
我正在学习来自.NET背景的Vue.js。我如何编写实现业务逻辑的类(从API获取信息并返回格式化的值以供前端使用)，这样我就可以简单地导入并保持我的Vue项目的整洁？
浏览 1提问于2020-04-30得票数 0
2回答
我正在使用Django表单在Django中创建一个表单。我需要两种表格。
一种表单，用于从用户收集数据，进行一些计算，并将结果显示给用户，而不将数据保存到数据库。我想显示的结果，一旦用户按下按钮(计算)在它旁边，而不是在不同的页面。
从用户收集数据的表单，在google工作表中的列中查找数据，如果它是唯一的，则将其添加到列中，否则会通知用户数据不是唯一的。
谢谢
浏览 1提问于2019-06-06得票数 0
我是Vue JS的新手，现在面临一个问题，这个问题看起来应该很容易，但我找不到解决办法。
这就是我想要做的，原因是：
我希望首先从服务器/本地加载一些数据，编辑数据，并将数据显示给用户。但是哪些数据是由用户决定的(通过按钮，例如单击事件)
因为显示数据的方式有点复杂(我指的是HTML代码，UI)，所以我决定创建一个全局组件来处理它，这样我的Vue实例就不会被弄糟了。
我已经完成了组件的一部分，但问题是，每次我刷新页面时，都会发出警告，表示有些参数是未定义的。
当然，在开始时没有定义它们，因为用户还没有选择加载哪些数据。
有经验的人能告诉我。我如何告诉Vue在单击事件之后
浏览 0提问于2018-08-07得票数 1
我需要一个插件来复制我一直喜欢使用的功能。
我已经为Vue找到了许多自动完成插件，但是没有一个带有标记。
尝试此页面中的任何示例，以查看如何将所选内容保存为输入中的标记。
我想要一个能与Vue js2.0一起工作的插件
浏览 9提问于2016-11-16得票数 2
回答已采纳
1回答
我使用的是MySQL db和Sails.js (水线)。
如何为从1000开始的MySQL表中的"id“列设置初始值？
attributes: {
id: {
type: 'integer'
// start from 1000
}
}
浏览 2提问于2016-10-14得票数 0
1回答
我用两种方式实现了一个简单的crud应用程序。一个是拉拉维尔和Vue，另一个是Laravel，Vue和惰性。
当在我的Vue/Laravel应用程序中呈现一个简单的用户列表时(无论是路由还是初始页面加载)，Vue立即呈现整个页面，并在从服务器接收到用户列表后立即加载。->良好的用户体验，实现加载指示的可能性
在我的惯性应用程序中呈现相同的内容时，Vue在从服务器接收数据之后呈现整个页面。这对于拥有大量数据的应用程序来说是一件非常糟糕的事情。
即使在我非常小/很瘦的应用程序中，我也感觉到了不同之处，在返回UserController中的视图(或惰性：：render)之前，我用简单的睡眠(3
浏览 5提问于2021-03-23得票数 1
回答已采纳
我正在使用vue multiselect包，在使用<multiselect>代替传统的<select>时，我遇到了一个问题。在我的vue组件中，我传入了一个prop，它包含一个对象数组，每个对象都有不同的属性。对于传统的vue中的select，您可以使用v-for遍历数组，然后根据object.id传递值，有没有办法使用vue-multiselect包来做到这一点？不确定以前是否有人尝试过将此作为表单的一部分，但值得一问。谢谢。 我的Vue文件 <multiselect
v-model="users"
:optio
浏览 26提问于2020-11-03得票数 2
回答已采纳
1回答
我的项目使用Vue.js和传单在地图上以标记的形式显示一些数据。
地图上的标记是绑定弹出，与任何Vue组件一样，当关联的数据发生变化时，我希望对这些内容进行动态更新。
我检查了选项，它为传单提供了弹出组件。但是这个脚本通过组件的一个属性：<l-popup content="a popup"></l-popup>来定义弹出的内容。这种方式与我的情况不太相关，因为我要在弹出窗口中插入一些复杂的模板(包括条件语句和子组件)。
我宁愿需要这样的东西：
<l-popup>
My elaborate content here.
</l-popu
浏览 0提问于2019-06-21得票数 5
我正在添加Vue.js到一个现有的网页与超文本标记语言表格。(我不能控制HTML，但可以注入指向我的Vue文件的链接。)
我无法插入动态JavaScript，但数据已在页面上。因此，我想让Vue能够从HTML中读取数据。
简化表如下所示：
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Sex</th>
</tr>
</thead>
<tb
浏览 4提问于2019-07-15得票数 0
我正在学习如何使用mysqli和AJAX，并使用AJAX构建一个简单的应用程序，将数据插入数据库，并在数据库中的表中显示数据。该表应在加载网页时显示当前信息，然后在使用HTML表单向数据库添加记录时进行更新。我有几个问题。
到目前为止，表单在我的主HTML文件中工作，只是它离开页面并打开addActorInfo.php，而不是仅仅刷新主页。
当我在浏览器中打开getActorInfo.php文件时，表可以工作，但是它不会被拖到主页面中。
如有任何建议，将不胜感激。
编辑信息：解决了第一个问题，并更新了HTML代码以反映更改。目前，我认为我的drawTable()函数中有一个错误
浏览 4提问于2013-02-18得票数 0
1回答
我想使用jsgrid.min.js在vue组件中创建表，我应该在jsgrid.min.jsfunction中调用它
jsGrid(..)
如何做到这一点？(调用将vue组件置于组件外部的函数)
component.vue
<template>
<div id="jsGrid">
</div>
</template>
<script>
export default {
data: () => ({
name: "mja"
}),
浏览 1提问于2018-04-13得票数 1
回答已采纳
我正在尝试创建一个像这样的下拉列表。但无法添加任何CSS。请让我知道如何创建自定义选择下拉菜单在Vue？
浏览 3提问于2022-06-22得票数 -2
标题是我的问题。
First，，我正在用Node.js和Vue.js制作简单的日记应用程序。Vue-路由器使用历史记录模式和后端，使用“连接-历史-api-后备”模块。我想我已经做了我能做的一切，但是当我在本地运行我的应用程序时，刷新vue.js的商店就清空了。我搜索了但找不到同样的问题。有人知道吗？
，第二，，我在用穆特上传。上传很好，我可以看到上传的图像。但我不知道怎么显示上传的图像。
我的意思是在vue的模板中，什么路径将显示上传的图像？
上传到这里的图片“/simple-日记/后端/upload/profilePhoto/”
Vue.js组件在这里“/simple-日记/前端/src/
浏览 0提问于2018-03-08得票数 0
回答已采纳
3回答
我的数据库里有张名叫youi的桌子。除了aff和desc字段外，表中的所有字段都包含值。见下图。
现在，我有一个表单在我的HTML页面(见下图)，我想要更新desc和aff字段，根据他们的营地。我以前还没有处理过这种设置。我已经思考了将近一天了，但仍然找不到一个完美的解决方案。你能给我关于如何实现这一目标的想法或解决方案吗？我使用的是PHP和mySQL。
提前感谢！
浏览 3提问于2013-11-15得票数 1
回答已采纳
1回答
我有一个关于预先录制用php构建的vue应用程序的问题( laravel或纯php，没关系)，我的问题是，如何使用动态内容进行预录制:例如:当我用vue和php创建博客以显示帖子时，我在vue应用程序中发出Ajax请求。谷歌机器人和其他网络爬虫将如何读取我的网站内容
提前感谢
浏览 1提问于2019-09-17得票数 0
回答已采纳
可以在没有提交按钮的情况下自动将ComboBox中的选定项保存到MYSQL中吗？
浏览 0提问于2011-10-06得票数 0
回答已采纳
基本上，我想要实现的是从服务器获取数据并在嵌套的json中显示数据，以便在Multiselect，中显示。
显示后，我可以添加新的标签，如果我想(能够更新它)。
我能够让嵌套的json中的对象在multiselect中显示，但我不知道如何定制它以只显示名称。
当前行为：
因此预期的行为将是，只有沙发，桌子和椅子应该显示在多重选择：
有什么办法让我只显示上面的图片吗？
在实现了@Ikbel获取json对象并只显示所需名称的方法之后。现在，我有了另一个问题，就是每当我向它添加一个新标签时，都会得到选项的副本。
这是我的Vue代码：
<template>
浏览 9提问于2017-07-24得票数 1
回答已采纳
3回答
我不知道为什么我的数据不会显示在我的数据表中，但是当我检查控制台和vue工具时，我可以看到我的数据。当我编译我的js文件时，它不会显示一个错误。我只是使用了数据表和$('#example').DataTable();函数，然后我在<td>中使用了v-for来显示数据。谢谢你的帮助！
Users.vue
<table id="example" class="table table-striped table-bordered">
<thead>
浏览 40提问于2019-08-03得票数 0
回答已采纳
1回答
我是Vue的新手，我一直试图在jquery数据表中使用Vue。我正在为一个项目工作，在这个项目中我需要使用jquery数据。在下面的代码片段中，我尝试将Vue与jquery数据表结合起来，但它不起作用。结果是没有创建datatable，也没有内容。(我使用没有npm的Vue )
如果有人能帮我，我会很感激的。
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
浏览 3提问于2022-10-22得票数 0
回答已采纳
我使用devise，提交所有的设计表单，如注册，登录，忘记密码的表单在ajax的方式添加远程:真。如何处理显示错误消息和闪光消息。
浏览 6提问于2019-03-05得票数 0
我有一个asp.net核心项目，它使用vuejs框架(javascript) --这是页面结构的一个示例(为了简单起见，所有内容都去掉了)
//Index.cshtml
<div id="page-1">
</div>
<script src='~/page-1.js' defer></script>
//page-1.js
(function () {
var Page1Vue = new Vue({
el: "#page-1",
});
})();
一切运转良好(安装，所
浏览 6提问于2019-12-17得票数 1
我在Vue.js中使用了Vue.js下拉列表，它在所有设备和网络上都能正常工作。在iOS中，我们需要点击两次才能选择一个选项。
浏览 2提问于2019-06-06得票数 1
回答已采纳
我需要创建一个NumberTextBox，它可以接受0到1之间的值，格式如下：
0 valid
0.1 valid
0.2 valid
...
1.0 valid
1 valid
在移动时，我使用的是pattern '#.#'，但是表单在这种情况下是无效的：
0 invalid
1 invalid
如何修复NumberTextBox的模式
<input data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="value:0.0, constraints:{min:
浏览 1提问于2016-03-18得票数 0
回答已采纳
我有个Vue 3项目
我的大多数组件都使用App.vue中的模板(我的理解是，这类似于.net核心中的“母版页”，其完整性继承了App.vue的样式和布局。在我的例子中，app.vue将具有仪表板布局(顶部和侧面)，然后我将在内容部分加载受限制的组件。
然而，我似乎想不出如何使面向公众的页面，如登录和注册，根本不引用仪表板模板，因为它们没有登录，但仍然允许一些Vue功能。我如何拆分他们或有多个主App.vue模板不同的用户，基于他们的角色或登录状态。
非常感谢你的帮助。
浏览 0提问于2021-05-27得票数 0
2回答
我正在尝试设置一个vue应用程序，它向后端发出请求，然后在页面上显示结果。我编造了这个例子
new Vue({
data: {
message: '{}'
},
el: '.login-app',
});
Vue.component('message-section', {
template: '<div>Message Section</div>'
});
Vue.component('login-component', {
te
浏览 4提问于2017-12-19得票数 2
回答已采纳
当时还在努力想办法解决问题。我有一个显示表的模式，对于表中的每个条目，我都有操作(即显示、编辑、删除等等)。当用户单击该模型中的条目行的"Edit“时，我希望它用表单填充另一个模型，以显示与该条目相关的数据。
有方便的方法吗？首先，我不知道如何将参数从另一个模态传递到一个模态。我不知道如何使这个表单在加载第一个页面时已经呈现后“重新初始化”。
有什么建议吗？
浏览 0提问于2014-10-30得票数 0
回答已采纳
1回答
我有几张卡片就像单选按钮一样。
<div class="card">
<input
checked=""
class="card__input"
type="radio"
v-model="templatePicked"
:value="template.value"
name="template"
:id="template.id"
浏览 1提问于2017-04-13得票数 2
我正在解析Play框架文档，并试图找出是否有可用于从给定域对象生成XML响应的开箱即用的东西，就像我们为Json.toJson(Object)提供的一样。
以下代码适用于play framework 2.1.2中的Json REST API，谁能建议如何在这里生成XML而不是Json？
package controllers;
import java.util.List;
import java.util.concurrent.Callable;
import play.Logger;
import play.libs.F.Function;
import play.libs.F.Prom
浏览 1提问于2013-08-07得票数 0
我正在尝试优化使用Vue.js的绿地项目的引用。它还使用Bootstrap，它的一些魔力需要jQuery，所以jQuery已经混合在一起了。虽然我不打算使用它的DOM操作工具，但是jQuery已经存在了，那么是否有充分的理由不把它仅仅用于Vue组件中的AJAX调用？jQuery和axios之间的语法非常相似，所以如果我可以避免添加另一个库，那就是groovy。
浏览 0提问于2019-03-02得票数 3
回答已采纳
我创建了这个页面模板，用于将vue应用程序集成到现有的网站中
<?php
/*
* Template Name: Registration Form
*/
get_header();
?>
<div id="app"></div>
<?php
get_footer();
?>
经过一些调试，我解决了vue路由器的一个问题，因为我需要手动设置基本url，所以没有加载我的应用程序的视图。
在我的vue应用程序，我将有一个自定义的登录和注册表格，我需要处理的wordpress。为了实现这一点，我希望在vue应用程序中使用axios来发
浏览 7提问于2022-09-17得票数 0
回答已采纳
2回答
根据，Vue对象的构造函数是这样管理的。
var vm = new Vue({
created: function () { console.log("I'm created!"); }
});
但是，在创建Vue组件时，我不知道如何做相应的事情。我已经尝试了以下操作，但没有将任何内容打印到控制台。
export default {
created: function() { console.log("Component created!"); }
}
是否可以订阅/侦听正在呈现的组件？我想通过下载一些数据并将其放入存储区来对该事件做出反应，这样
浏览 1提问于2016-12-10得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
