vue3-json-schema-form中StringField.vue报错 `<script setup>` cannot contain ES module exports vue/no-e

这篇具有很好参考价值的文章主要介绍了vue3-json-schema-form中StringField.vue报错 `<script setup>` cannot contain ES module exports vue/no-e。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

报错<script setup> cannot contain ES module exports vue/no-export-in-script-setup

vue3-json-schema-form课程中StringField.vue照着打报错
原代码如下:

<template>
  <input type="text" :value="value" @input="handleChange" />
</template>
`<script lang="ts" setup="props">
import { ref } from 'vue'
import { FiledPropsDfine, Schema } from '../types'
export default {
  props: FiledPropsDfine,
}
declare const props: {
  // 向ts声明props的定义
  value: any
  onChange: (v: string) => void
  schema: Schema
}

export const handleChange = (e: any) => {
  console.log(e)
  props.onChange(e.target.value)
}
</script>

修改后代码如下:

<template>
  <input type="text" :value="value" @input="handleChange" />
</template>
`<script lang="ts" setup="props">
import { FiledPropsDfine, Schema } from '../types'
declare const props: FiledPropsDfine & {
  // 向ts声明props的定义
  value: any
  onChange: (v: string) => void
  schema: Schema
}
const handleChange = (e: any) => {
  console.log(e)
  props.onChange(e.target.value)
}
</script>

type.ts文件代码片段如下:

import { SchemaRefs } from 'ajv/dist/compile'
import { PropType } from 'vue'
export enum SchemaTypes {
  'NUMBER' = 'number',
  'INTEGER' = 'intrger',
  'STRING' = 'string',
  'OBJECT' = 'object',
  'ARRSY' = 'array',
  'BOOLEAN' = 'boolean',
}

type SchemaRef = { $ref: string } // 预先定义 可以使用$ref引用schema

// type Schema = any
export interface Schema {
  type: SchemaTypes | string // 加上string有利于类型的校验 要不然只能用SchemaTypes.NUMBER来使用类型
  const?: any
  format?: string
  default?: any
  properties?: {
    [key: string]: Schema | { $ref: string }
  }
  items?: Schema | Schema[] | SchemaRefs
  dependencies?: {
    [key: string]: string[] | Schema | SchemaRef
  }
  oneOf?: Schema[]
  anyOf?: Schema[]
  allOf?: Schema[]
  //   vjsf?: VueJsonSchemaConfig
  required?: string[]
  enum?: any[]
  enumKeyValue?: any[]
  additionalProperties?: any
  additionalItems?: Schema
}

export const FiledPropsDfine = {
  schema: {
    type: Object as PropType<Schema>,
    required: true,
  },
  value: {
    required: true,
  },
  onChange: {
    type: Function as PropType<(v: any) => void>,
    required: true,
  },
  rootSchema: {
    type: Object as PropType<Schema>,
    required: true,
  },
} as const

主要问题就是说script标签中加上setup,代码块中不能再出现export default关键字,将该部分代码

export default {
  props: FiledPropsDfine,
}
declare const props: {
  // 向ts声明props的定义
  value: any
  onChange: (v: string) => void
  schema: Schema
}

修改为:文章来源地址https://www.toymoban.com/news/detail-508385.html

declare const props: FiledPropsDfine & {
  // 向ts声明props的定义
  value: any
  onChange: (v: string) => void
  schema: Schema
}

到了这里,关于vue3-json-schema-form中StringField.vue报错 `<script setup>` cannot contain ES module exports vue/no-e的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3在table里使用elementUI的form表单验证

            常规情况下。rules和formItem是一对一的。例如下面的情况,判断表单内的测试1和测试2是否为空。         但是,如果在table中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现,value一直未undefined。

    2024年02月04日
    浏览(52)
  • 微信小程序/vue3/uview-plus form兜底校验

    1. :model=‘form’ 若把form的值设置为 空对象  const form = reactive({  }); 控制台报错    2. 不能把 prop 写为name 否则没有任何效果

    2024年02月07日
    浏览(53)
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

    在 Element Plus 中, el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有

    2023年04月20日
    浏览(42)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(63)
  • vue3 element-plus el-form的二次封装

    form表单的二次封装 vue3 element-plus el-form的二次封装 属性名 类型 默认值 说明 data Array [] 页面展示数据内容 onChange Function false 表单事件 bindProps Object {} 表单属性 formRef Object {} 表单ref ruleForm Object {} 数据

    2024年02月13日
    浏览(68)
  • Vue3+Element Plus 关于Dialog弹出Form表单,使用resetFields重置无效的解决

    主要参考了element-plus官方的表单重置按钮(官方Form例子任意reset按钮),然后试了试他的ref绑定,发现可以完美解决重置问题。 第一步:给Form表单绑定ref。绑定ref 的值为refFormInstance();这里注意表单el-form-item必须有prop属性。 2.第二步:在你想要重置的地方调用重置表单方法

    2024年01月21日
    浏览(45)
  • Json Schema介绍 和 .net 下的实践 - 基于Lateapexearlyspeed.Json.Schema - 基础1 - type关键字和string类型

    本系列旨在介绍Json Schema的常见用法,以及.net实现库Lateapexearlyspeed.Json.Schema的使用 这篇文章将介绍Json Schema中的type,和string类型的常见验证功能。用例基于.net的LateApexEarlySpeed.Json.Schema nuget package。这是新创建的一个 Json Schema在.net下的高性能实现库。 就像其他各种Sch

    2024年02月02日
    浏览(42)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(84)
  • vue3-访问本地json文件

    将json文件放在public文件夹中(json文件要以英文命名)  用fetch可以直接访问public下的文件

    2024年02月08日
    浏览(41)
  • vue3 antd项目实战——Form表单的重置与清空【resetFields重置表单未生效(手写重置函数)】

    文章内容 文章链接 Form表单 提交和校验 https://blog.csdn.net/XSL_HR/article/details/128495087?spm=1001.2014.3001.5501 Form表单的 嵌套使用 https://blog.csdn.net/XSL_HR/article/details/128488913?spm=1001.2014.3001.5501 Form表单的 动态校验规则 https://blog.csdn.net/XSL_HR/article/details/128437275?spm=1001.2014.3001.5501 From表单的

    2024年02月02日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包