<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view>
</block>
<view v-else>
<view>{{idx}}</view>
</view>
</block>
</view>```
- 发布:2020-05-26 18:14
- 更新:2020-11-20 15:32
- 阅读:1431
【报Bug】在视图 用v-for嵌套在 block和view标签上绑定v-if和v-else 对报错“Attempted to assign to readonly property.” 导致渲染异常
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 2.7.8
手机系统: Android
手机系统版本号: Android 9.0
手机厂商: vivo
手机机型: vivo X23
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view>
</block>
<view v-else>
<view>{{idx}}</view>
</view>
</block>
</view>```
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view>
</block>
<view v-else>
<view>{{idx}}</view>
</view>
</block>
</view>```
预期结果:
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view> // 1
</block>
<view v-else>
<view>{{idx}}</view> // 2 3 4...100
</view>
</block>
</view>```
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view> // 1
</block>
<view v-else>
<view>{{idx}}</view> // 2 3 4...100
</view>
</block>
</view>```
实际结果:
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view> // 1
</block>
<view v-else>
<view>{{idx}}</view> // undefined
</view>
</block>
</view>```
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">控制台报错Attempted to assign to readonly property.</text>
<text>只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错 </text>
</view>
<block v-for="idx in num" :key="idx">
<block v-if="idx == 1">
<view>{{idx}}</view> // 1
</block>
<view v-else>
<view>{{idx}}</view> // undefined
</view>
</block>
</view>```
bug描述:
控制台报错Attempted to assign to readonly property.
描述:只有在v-for里嵌套block和view标签并在v-if里写判断,idx == 1报错,idx < 1报错,idx > 1不报错
复现方式:请看截图和源码