uni-app 【报Bug】vue3 nvue页面swiper组件设置dataset属性，属性名会多一个“-”字符

开发环境	版本号	项目创建方式
Windows	Windows10	HBuilderX

操作步骤：

切换manifest.json的Vue版本，可发现home.nvue页面custom-swiper组件swiperChange事件打印的target.dataset的内容不同

预期结果：

home.nvue页面custom-swiper组件swiperChange事件打印的target.dataset下的属性应该为"index"

实际结果：

home.nvue页面custom-swiper组件swiperChange事件打印的target.dataset下的属性应该为"-index",前面多了一个“-”

bug描述：

vue3 nvue页面swiper组件设置dataset属性，打印可发现属性名会多一个“-”字符。如：

:data-index="index"

结果为dataset[’-index’]

下载附件

更多关于uni-app 【报Bug】vue3 nvue页面swiper组件设置dataset属性，属性名会多一个“-”字符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

更多关于uni-app 【报Bug】vue3 nvue页面swiper组件设置dataset属性，属性名会多一个“-”字符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中使用 vue3 开发 nvue 页面时，如果在 swiper 组件中设置 dataset 属性，属性名会多一个 - 字符，这可能是由于 uni-app 在处理 dataset 属性时的解析逻辑问题。

问题描述

在 swiper 组件中，dataset 属性用于传递自定义数据。例如：

<swiper :dataset="{ myData: 'value' }">
  <swiper-item v-for="(item, index) in list" :key="index">
    <view>{{ item }}</view>
  </swiper-item>
</swiper>

在 vue3 的 nvue 页面中，dataset 属性名可能会被解析为 -myData，而不是 myData。

解决方案

目前，uni-app 官方可能尚未完全支持 vue3 在 nvue 页面中的 dataset 属性解析。你可以尝试以下解决方案：

使用 data- 前缀：在 dataset 属性中，手动添加 data- 前缀，避免解析问题。

<swiper :dataset="{ 'data-myData': 'value' }">
  <swiper-item v-for="(item, index) in list" :key="index">
    <view>{{ item }}</view>
  </swiper-item>
</swiper>

使用 ref 获取 swiper 实例：通过 ref 获取 swiper 实例，然后直接操作 dataset。

<template>
  <swiper ref="mySwiper">
    <swiper-item v-for="(item, index) in list" :key="index">
      <view>{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const mySwiper = ref(null);

onMounted(() => {
  if (mySwiper.value) {
    mySwiper.value.dataset.myData = 'value';
  }
});
</script>

使用 props 传递数据：如果 dataset 不是必须的，可以考虑使用 props 传递数据。

<swiper :myData="value">
  <swiper-item v-for="(item, index) in list" :key="index">
    <view>{{ item }}</view>
  </swiper-item>
</swiper>