Closed JHeLiu closed 1 year ago
当我使用组件时候无法拖动
<VueDraggable v-model="productImages" animation="150" handle=".product-image-header-drag"> <ul> <li v-for="(item, index) in productImages" :key="index"></li> </ul> </VueDraggable> <script lang="ts" setup> const productImages = ref<[]>([]); </script >
当我使用指令的时候,数据无法排序,但是可以拖动,但我table tr 是正常的
<ul v-draggable="[productImages, { animation: 300, onUpdate: onUpdate, handle: '.product-image-header-drag' }]"> <li v-for="(item, index) in productImages" :key="index"></li> </ul> <script lang="ts" setup> const productImages = ref<[]>([]); </script >
测试发现,它无法对 ul li 元素起作用, 是我的使用方法不对吗? 还是它不支持 ul 元素
当我改成 div 结构的时候它生效了
还有一个问题,当我的数据从另外一个数组直接赋值的时候 它也是不生效
<script lang="ts" setup> const productImages = ref<ProductModel.Image[]>([]); const producOptions = ref<ProductModel.Options[]>([]); const producVariants = ref<ProductModel.Variant[]>([]); //从服务器请求数据 let value = await ProductService.getAsync(); productImages.value = value.images; //数据无法排序 producOptions.value = value.options; //数据无法排序 producVariants.value = value.variants; //正常 最后一个它既然正常 //该方法数据正常排序 value.images.forEach(item => { productImages.value.push(item) }) value.options.forEach(item => { producOptions.value.push(item) }) value.variants.forEach(item => { producVariants.value.push(item) }) </script >
这应该是vue内置机制问题,可以优化它的问题吗?
这是类
/** * 产品信息 */ export namespace ProductModel { /**基类 */ export class Base { /** * 产品描述 */ body_html: string = ""; /** * 创建日期 */ created_at?: string; /**产品id */ id: string = ""; /** * 对象图片 */ images: Image[] = []; /** * 自定义产品属性。例如,大小、颜色和材料。每个产品最多可以有 3 个选项 */ options: Options[] = []; /**产品的分类 */ product_type: string = ""; /**发布时间 */ published_at?: string; /**发布到销售点渠道 */ published_scope: string = ""; /**产品的状态 active=活跃 archived=下架 draft=草稿 */ status: string = "active"; /** 筛选和搜索的逗号分隔标记字符串 一个产品最多可以有 250 个标签。每个标签最多可包含 255 个字符。 */ tags: string = ""; /**产品名称 */ title: string = ""; /**修改时间 */ updated_at?: string; /**多属性 */ variants: Variant[] = []; /**厂商名称 */ vendor: string = ""; } /**商品图片 */ export class Image { /** * 商品图片的唯一数字标识符。 */ id: string = "0"; /** * 产品图像在列表中的顺序。第一个产品图片位于位置 1,是商品的“主”图片。 */ position: number = 0; /** * 产品图像在列表中的顺序。第一个产品图片位于位置 1,是商品的“主”图片。 */ product_id: string = "0"; /** * 与图像关联的变体 ID 数组 */ variant_ids: string[] = []; /** * 图片地址 */ src: string = ""; /** * 上传时确定的图像的宽度尺寸 */ width?: number; /** * 上传时确定的图像的高度尺寸 */ height?: number; /**创建时间 */ created_at?: string; /**修改时间 */ updated_at?: string; /**是否选中 */ _vIsSelected?: boolean; /**显示操作 */ _vShowTools?: boolean } /**SKU 属性选项值 */ export class Options { /** * id */ id: string = "0"; /**商品ID */ product_id: string = "0"; /**属性选项key */ name: string = ""; /**排序位置 */ position: number = 1; /**属性选项值 */ values: string[] = []; /**验证key */ _validateName?: boolean; /**验证选项值 */ _validateValues?: number[] } /**商品属性 */ export class Variant { /**id */ id: string = "0"; /** * 商品的条形码、UPC 或 ISBN 编号 */ barcode?: string; /**创建日期 */ created_at?: string = ""; /** * 调整或销售前商品的原始价格 */ compare_at_price: string = ""; /**储存产品多属性的履行服务的句柄 */ fulfillment_service: string = "manual"; /**产品变型的重量(以克为单位) */ grams: number = 0; /** * 产品图片的唯一数字标识符。 图片必须与多属性关联到同一商品 */ image_id: string = "0"; /**清单项的唯一标识符,在清单 API 中用于查询清单信息 */ inventory_item_id: string = "0"; /**跟踪产品多属性的库存物料数量的履行服务。 有效值 shopify null */ inventory_management?: string; /**是否允许客户在产品多属性缺货时下订单。有效值 deny=不允许 continue=允许 */ inventory_policy: string = "deny"; /**所有位置的广告资源汇总。若要调整特定位置的库存 */ inventory_quantity?: string = ""; /** * 选项值 option1 */ option1?: string; /** * 选项值 option2 option3 */ option2?: string; /** * 选项值 option3 */ option3?: string; /**多属性的呈现价格列表 */ presentment_prices?: any = {}; /**产品多属性的价格 */ price: string = "0"; /**产品ID */ product_id: string = "0"; /** */ sku: string = ""; /**销售产品变型时是否收取税费 */ taxable: boolean = false; /** * 产品变型的标题。该字段是和字段的串联。您只能使用这些字段间接更新。 */ title: string = ""; /** * 单位值 */ weight: number = 0; /** * 单位选项值 g=克 kg=千克 oz=盎司 lb=磅 */ weight_unit: string = "g"; } }
关于 ui li 的使用方式,请参考官网演示,另外您所描述的获取服务端数据无法使用的问题,请提供最小复制链接,以帮助我们更好的解决问题,谢谢
当我使用组件时候无法拖动
当我使用指令的时候,数据无法排序,但是可以拖动,但我table tr 是正常的
测试发现,它无法对 ul li 元素起作用, 是我的使用方法不对吗? 还是它不支持 ul 元素
当我改成 div 结构的时候它生效了
还有一个问题,当我的数据从另外一个数组直接赋值的时候 它也是不生效
这应该是vue内置机制问题,可以优化它的问题吗?
这是类