<el-collapse-item v-for="(value, key, index) in props.set_svg_info.extend_attr" :key="index" title="name" :name="key" > <template #title> <div class="header-title"> {{ value.title }} </div> </template> <!-- 每一小项循环 --> <!-- v-for="(sItem, sIndex) in item.listView" :key="sIndex" --> <div class="flex margin-b"> <span class="title">{{ value.title }}</span> <!-- 小项中可能有不止一项 --> <!-- v-for="(iItem, iIndex) in sItem.valueArr" :key="iIndex" --> <div class="inputGroup"> <!-- select --> <el-select v-if="value.type === 'select'" v-model="value.val.selectval" class="margin-r"> <el-option v-for="siItem in value.val.selectgroup" :key="siItem.value" :label="siItem.label" :value="siItem.value" /> </el-select> </div> </el-collapse-item> </el-collapse> </el-tab-pane> 改变选项时 打印的 value.val.selectval 是字符串, 但是 在浏览器中 却显示为 [object Object]
时间: 2023-08-06 08:02:38 浏览: 49
当`value.val.selectval`在浏览器中显示为`[object Object]`时,可能是因为`value.val.selectval`的值实际上是一个对象,而不是一个字符串。在Vue.js中,当你在模板中使用双花括号`{{ }}`来显示绑定的值时,Vue会自动调用对象的`toString()`方法将其转换为字符串。但是,默认情况下,JavaScript对象的`toString()`方法会返回`[object Object]`。
如果你想在浏览器中正确显示对象的内容,你可以使用Vue的计算属性来处理`value.val.selectval`。在计算属性中,你可以将对象转换为字符串,并将转换后的字符串绑定到模板中。以下是一个示例:
```javascript
// 在Vue组件中定义计算属性
computed: {
selectValString() {
return JSON.stringify(this.value.val.selectval);
}
}
```
然后,在模板中使用新的计算属性`selectValString`来显示对象的字符串表示形式:
```html
<el-select v-if="value.type === 'select'" v-model="selectValString" class="margin-r">
```
这样,当改变选项时,`value.val.selectval`会被正确地转换为字符串并显示在浏览器中,而不再显示为`[object Object]`。
相关问题
<el-collapse-item v-for="(value, key, index) in props.set_svg_info.extend_attr" :key="index" title="name" :name="key" > <template #title> <div class="header-title"> {{ value.title }} </div> </template> <!-- 每一小项循环 --> <!-- v-for="(sItem, sIndex) in item.listView" :key="sIndex" --> <div class="flex margin-b"> <span class="title">{{ value.title }}</span> <!-- 小项中可能有不止一项 --> <!-- v-for="(iItem, iIndex) in sItem.valueArr" :key="iIndex" --> <div class="inputGroup"> <!-- select --> <el-select v-if="value.type === 'select'" v-model="value.val.selectval" class="margin-r"> <el-option v-for="siItem in value.val.selectgroup" :key="siItem.value" :label="siItem.label" :value="siItem.value" /> </el-select> </div> </el-collapse-item> </el-collapse> </el-tab-pane> 为什么 value.val.selectval 绑定到元素上会变成 [object Object]
当将`value.val.selectval`绑定到元素上时,它会被自动转换为字符串。由于`value.val.selectval`是一个对象,转换为字符串时会变成`[object Object]`。这是因为默认情况下,JavaScript将对象转换为其默认的字符串表示形式`[object Object]`。
如果你希望正确地显示对象的值,你可以使用双花括号`{{ }}`将其包裹起来,这样会将对象转换为字符串并显示其内容。例如,你可以将绑定修改为`{{ value.val.selectval }}`。这样,当显示绑定的值时,会正确地显示对象的内容而不是`[object Object]`。
怎么回显改代码<el-form-item label="事件类型" prop="event_type_id"> <el-select placeholder="事件类型选择" v-model="state.form.event_type_id" @change="handleAreaSelectChange" class="m-2" multiple > <el-option v-for="item in props.eventType" :key="item.id" :label="item.name" :value="item.id" /></el-select> </el-form-item>
这段代码是一个带有标签 "事件类型" 的表单项,其中包含一个选择框,用于选择事件类型。选择框绑定了一个名为 "state.form.event_type_id" 的属性,该属性的值将在选择框中选择时更新。选择框还绑定了一个 "change" 事件,当选择框中的选项发生变化时,将调用一个名为 "handleAreaSelectChange" 的方法。此外,选择框还设置了一个 "class" 属性,并且可以同时选择多个选项。在选择框中,使用了一个 "v-for" 指令来循环遍历一个名为 "props.eventType" 的数组,并将数组中每个元素渲染为一个选项,其中每个选项的 "value" 属性设置为元素的 "id" 属性,"label" 属性设置为元素的 "name" 属性。