v-for 语法在 uni-app 只有一个变量且变量名包含中文时工作异常

v-for 语法在 uni-app 只有一个变量且变量名包含中文时工作异常

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

示例代码：

<template>  
    <view class="content">  
        <view v-for="item in items" @click="log(item)" class="cphm-item" >  
          {{ item }}  
        </view>  
        ----------------  
        <view v-for="带中文item in items" @click="log(带中文item)" class="cphm-item" >  
          {{ 带中文item }}  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                items: ['item1','item2','item3']  
            }  
        },  
        methods: {  
            log(msg){  
                console.log(msg)  
            }  
        }  
    }  
</script>

操作步骤：

  • 运行后点击就复现

预期结果：

  • 点击不同的view打印不同的内容

实际结果：

  • 包含中文的变量名只打印数组中的第一个对象

bug描述：

uniapp项目中 v-for 语法在只有一个变量且变量名包含中文时工作异常, vue2和vue3都异常,在纯vue3项目中没有该问题


更多关于v-for 语法在 uni-app 只有一个变量且变量名包含中文时工作异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，已复现此问题，先注意规避使用中文给v-for的遍历变量命名吧。

更多关于v-for 语法在 uni-app 只有一个变量且变量名包含中文时工作异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app编译处理问题，当v-for循环变量名包含中文时会出现异常。建议避免在v-for中使用中文变量名，改用英文变量名即可正常工作。

问题原因：

  1. uni-app的编译器在处理模板时对中文变量名的支持不完善
  2. 在模板转译过程中，中文变量名可能被错误处理

解决方案：

<view v-for="item in items" [@click](/user/click)="log(item)" class="cphm-item">
  {{ item }}
</view>

替代方案（如需保留中文语义）：

<view v-for="(item, index) in items" [@click](/user/click)="log(item)" class="cphm-item">
  {{ item }}
</view>
回到顶部