<detail-item-list v-if="formData.size" term="备件尺寸" >{{ getSize(0) }}mm(长) * {{ getSize(1) }}mm(宽) * {{ getSize(2) }}mm(高)</detail-item-list > getSize(index) { let size = [] try { console.log(this.formData.size) return if(JSON.parse(this.formData.size).includes(",")){ size = []; }else{ size = JSON.parse(this.formData.size) } } catch (e) { console.error('size try:', e) } return size[index] ? size[index] : 0 },这样写getSize的数据不展示
时间: 2024-02-14 19:27:20 浏览: 38
根据你提供的代码,我注意到依然存在问题。在 getSize 方法中,你使用了 try-catch 块来解析 `this.formData.size`。然后,在 try 块中,你检查了 `this.formData.size` 是否包含逗号,如果包含逗号,则将 `size` 数组重置为空数组,否则将 `size` 数组设置为解析后的值。
然而,在你的代码中,你在解析后使用了一个 return 语句,但该语句没有指定返回值,因此返回的是 undefined。这导致 getSize 方法的结果始终是 undefined,所以数据不会被展示。
为了解决这个问题,请将 return 语句修改为返回正确的值。同时,你可以将 try-catch 块中的代码进行简化,以提高代码的可读性。修改后的代码如下所示:
```javascript
getSize(index) {
try {
const size = JSON.parse(this.formData.size);
return size[index] ? size[index] : 0;
} catch (e) {
console.error('size try:', e);
return 0;
}
}
```
通过这样的修改,getSize 方法将会执行解析和返回正确的值。请记得在修改代码之前备份原始代码,以防止意外修改导致其他问题。
相关问题
<detail-item-list v-if="formData.size" term="备件尺寸" >{{ getSize(0) }}mm(长) * {{ getSize(1) }}mm(宽) * {{ getSize(2) }}mm(高)</detail-item-list > getSize(index) { try { const size = JSON.parse(this.formData.size); return size[index] ? size[index] : 0; } catch (e) { console.error('size try:', e); return 0; } }这样写的getSize数据没展示
根据你提供的代码,我注意到在 `<detail-item-list>` 组件中,你使用了 `v-if` 条件来判断是否展示该组件,条件是 `formData.size`。然后,在组件内部,你通过调用 `getSize` 方法来获取备件尺寸的数据。
根据你提供的 `getSize` 方法的代码,我没有看到明显的问题。因此,我怀疑问题可能出在其他地方。
请确保以下几点:
1. 确保 `formData.size` 的值不为空或 undefined。如果 `formData.size` 的值为空或 undefined,那么 `<detail-item-list>` 组件将不会被渲染,无法显示数据。
2. 确保 `getSize` 方法被正确调用,并且传递了正确的索引值。请检查调用 `getSize` 方法的地方,并确保传递了正确的索引值。
3. 检查控制台是否有任何错误或警告消息。如果有,请查看错误消息的详细信息,以确定问题所在。
如果你仍然无法解决问题,请提供更多关于 `formData` 对象以及其他相关代码的信息,以便我可以更好地帮助你找到问题所在。
<div v-for="(item, index) in parameters" :key="index"> <el-form-item :label="item.value + item.remark"> <el-input v-if="item.type == 0" v-model=""></el-input> <el-radio-group v-model="processSelfTestEditForm.parameter" v-if="item.type == 1" > <el-radio label="合格" size="large">合格</el-radio> <el-radio label="不合格" size="large">不合格</el-radio> </el-radio-group> </el-form-item> </div> 动态渲染时怎么拿到每一个input 的v-model
你可以通过绑定动态的v-model,将每个input的v-model绑定到一个对象中,然后在提交表单时,获取这个对象的值。具体代码如下:
```
<el-form :model="formData" ref="form">
<div v-for="(item, index) in parameters" :key="index">
<el-form-item :label="item.value + item.remark">
<el-input v-if="item.type == 0" v-model="formData[item.key]"></el-input>
<el-radio-group v-model="formData[item.key]" v-if="item.type == 1">
<el-radio label="合格" size="large">合格</el-radio>
<el-radio label="不合格" size="large">不合格</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
```
在这个例子中,我们使用了一个对象 `formData` 来存储每一个input的值。我们可以在 `v-model` 中绑定 `formData[item.key]`,这里的 `item.key` 代表每一个input对应的key。在提交表单时,我们可以通过 `this.$refs.form.validate()` 方法获取到 `formData` 对象,并将其传递给后端。