问题标签 [vue-formulate]

我试图让 Vue Formulate 运行，但它不起作用。这是我的代码：

此版本包括导入语句： https ://vueformulate.com/guide/installation/#direct-download

打开站点会导致控制台中出现以下错误：

谢谢！

所以我在 vueJs 中并不专业，这就是为什么如果您需要更多额外信息，只需在评论中写下我会尝试提供它......这就是我安装这个插件的方式

在我想使用这个插件的模板中

但是在浏览器页面上什么都没有，我在渲染的页面树中看到了什么

所以我可以看到它没有被渲染。

一个小插曲。当我想使用插件的组件安装然后在控制台插件对象中输出时，它退出

来自控制台的屏幕

你能帮我找到我想念的吗？:3

我试图使用 v-bind 将数据传递给子组件，用于我的 vue 公式表单输入。我在父母中传递了这样的数据。

在 Child 中，我正在这样做

但我收到以下错误

知道可能是什么问题吗？

我刚刚开始研究 Vue Formulate，所以也许我遗漏了一些明显的东西。我将 a 绑定FormulateForm到一个包含一些属性的简单对象。当我最初设置模型时，值在表单中正确显示，但是当我将模型设置为不同的对象时，文本和布尔属性在表单中更新，但整数属性保留其原始值。如此基本的东西会被破坏似乎很奇怪，所以我做错了什么吗？

码沙盒.io

我目前正在使用 Vue Formulate 将数据传递@submit="login"给FormulateForm一个login(data)函数。只要我将逻辑保留在组件内，并且可以data使用 axios 将其发送到我的服务器，一切都运行良好。

事情是，我想把这个登录函数作为一个动作放在我的 Vuex 存储中，但是当我将@submit="login"from引用FormulateForm到...mapActions(["login"])函数时，里面没有传递数据。我登录data了这个login(data)动作，我得到了这个：

来自 vuex 模块中 console.log(data) 的响应

我可以将输入中的值绑定到商店并从那里获取它们，但我更愿意保持简单并使用@submit.

有可能这样做吗？

正在运行的实际代码概述：

我想要的概述，这是行不通的：

在 Vuex 模块 user.js 中：

如前所述，它不会像当前console.log(data)那样返回我的FormulateForm值。

在一个示例项目中，我将“Flexbox Wrapper”代码示例放在这里（从下拉列表中选择）

下面的代码旨在为奶酪选项和浇头的子表单组件创建 2 列：

但是，它将两者都显示为一列（参见附图。）除了指向CDN的默认 snow.min.css 的标题链接之外，我绝对没有其他样式。

这是非常基本的，很惊讶它没有像记录的那样工作。是否有任何隐含的步骤我错过了这个工作？

也不确定为什么架构中由“h3”组件表示的标题显示为不同的字体。

options在设置checkbox和/或元素数组时使用属性radio，如何为每个单选框/复选框自定义 HTML 格式的标签？例如，我想设置带有中断返回的日期/时间 - 请参见下面的输出示例：

这是vue代码：

我想验证我的公式不是通过 vue-formulate 输入类型提交而是通过另一个按钮。我的意思是，我有一个表单，其中包含 vue 公式，当我提交表单时，我想在发送数据之前检查我的 vue 公式。

这是一个例子

有可能做我想做的事吗？有人可以帮助我吗？

谢谢 ！

我正在使用Vue-Formulate 的可重复组。对于我的要求：

1. 一个组是可选的添加
2. 如果按下按钮来添加组，则必须验证组中的字段
3. 表格最初不应显示该组；它应该显示添加组的按钮

例如，所需的初始外观在以下屏幕截图中，这是我在链接的代码框中单击“删除”/X 按钮后生成的：

我在这里的代码和框中对此进行了模拟：Vue Formulate Group with Button to Start

这可能吗？如果是这样，怎么做？

2021 年 5 月更新的解决方法

在@braid/vue-formulate@2.5.2中，下面的解决方法（在研究：似乎更新：曾经工作的黑客）不再有效，使用插槽覆盖关闭按钮，保存参考，并触发点击。另请参阅https://github.com/wearebraid/vue-formulate/issues/425上的相关功能请求。

研究 - Vue-Formulate 的文档

在Vue-Formulate 的input带有type="group"props 和 slots的文档中，有一个minimumprop。我已将其设置为零，但这不会改变初始外观。我确实看到了多个插槽，但我不太确定要使用哪个插槽，或者是否可以使用其中任何一个来实现我想要的；看起来像default, grouping, 并且repeatable可能有助于防止第一组的初始显示。

研究 - Vue-Formulate 的测试

我看到FormulateInputGroup.test.js测试了it('repeats the default slot when adding more'，所以default插槽是重复的内容。根据文档，default插槽还接收index作为插槽道具，所以这可能很有用。

研究 - Vue 调试器

我要最初删除的项目位于FormulateInputGroup > FormulateGrouping > FormulateRepeatableProvider > FormulateRepeatable > FormulateInput：

当我删除初始项目以匹配所需的初始布局时，组层次结构更改为：

基于此更改，我希望我需要进行修改FormulateGrouping以获得所需的初始外观，但我还没有在源代码中找到哪些项目可供我使用。

研究：似乎更新的黑客：曾经工作

此 hack 在 v2.4.5 中有效，但从 2.5.2 开始，它不再有效。有关更新的解决方法，请参阅帖子顶部。

在挂载的钩子中，当我第一次渲染表单时，我可以对formValues传递的内容进行反省，v-model以查看该组是否缺少填充的初始元素。如果是这样，那么我可以使用类型 groupmsgs上的 refFormulateInput来调用 this.$refs.msgs.$children[0].$children[0].removeItem()，这会触发（空）项目的初始删除。这是超级hacky，所以我更喜欢更好的方法，但它有点工作。唯一的问题是它会在单击按钮时验证字段，然后再输入任何输入。

有没有办法让我的模式接受按钮的点击事件，或者点击事件必须手动绑定？

例如，有没有办法做类似的事情

还是我必须手动设置一个 FormulateInput 元素并将其放入我的模板中