将Vue公式与模式一起使用
将Vue公式与模式一起使用
提问于 2020-06-27 17:11:21
我试图让Vue公式运行，但它就是不起作用。下面是我的代码：
此版本包括导入语句：https://vueformulate.com/guide/installation/#direct-download
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.umd.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
<template>
<FormulateForm
v-model="values"
:schema="schema"
/>
</template>
<script>
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
Vue.use(VueFormulate)
export default {
data () {
return {
values: {},
schema: [
{
type: 'password',
name: 'password',
label: 'Enter a new password',
validation: 'required'
},
{
type: 'password',
name: 'password_confirm',
label: 'Confirm your password',
validation: '^required|confirm:password',
validationName: 'Password confirmation'
},
{
type: 'submit',
label: 'Change password'
}
]
}
}
}
</script>打开站点会导致控制台中出现以下错误：
formulate.umd.min.js:5 Uncaught TypeError: Cannot read property 'en' of undefined
at new Jt (formulate.umd.min.js:5)
at formulate.umd.min.js:5
at formulate.umd.min.js:5
at formulate.umd.min.js:5
Jt @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
test.html:15 Uncaught SyntaxError: Unexpected token 'export'谢谢!
回答 1
Stack Overflow用户
发布于 2020-06-28 01:51:04
该问题的部分原因是DOM限制，如Vue Formulate's documentation on direct downloads中的小说明中所述。更具体地说，由于我们不使用构建器，而是从CDN下载库并将其与脚本标记一起插入，因此所有组件名称必须为kebab-case。我们还需要创建一个Vue实例。
Vue.use(VueFormulate)
new Vue({
el: '#app',
data: function () {
return {
values: {}
}
}
})<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue-Formulate example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Formulate</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/formulate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
</head>
<body>
<div id="app">
<formulate-form v-model="values">
<formulate-input
type="password"
name="password"
label="Enter a new password">
</formulate-input>
<formulate-input
type="password"
name="password_confirm"
label="Confirm your password"
validation="required|confirm:password"
validation_name="Password confirmation">
<formulate-input
type="submit"
label="Change password">
</formulate-form>
</formulate-form>
<p><strong>This is your password: {{ values }}</strong></p>
</div>
</body>
</html>
模式也是如此(请注意，Vue-Formulate需要2.4或更高版本)：
Vue.use(VueFormulate)
var app = new Vue({
el: '#app',
data: function () {
return {
values: {},
schema: [
{
type: 'password',
name: 'password',
label: 'Enter a new password',
validation: 'required'
},
{
type: 'password',
name: 'password_confirm',
label: 'Confirm your password',
validation: '^required|confirm:password',
validationName: 'Password confirmation'
},
{
type: 'submit',
label: 'Change password'
}
]
}
}
})<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue-Formulate example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Formulate with Schema</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
</head>
<body>
<div id="app">
<formulate-form v-model="values" :schema="schema"/>
<p><strong>This is your password: {{ values }}</strong></p>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62608034
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号