我要从category:[{name:'张三',categoryId:17},{name:'张三',categoryId:18},{name:'张三',categoryId:19},{name:'张三',categoryId:20}]找到id是17的数据 把他的name渲染到 <el-form ref="form" :rules="rules" :model="form" label-width="80px"> <el-form-item label="商品类目" prop="categoryId"> <el-select @focus="open" v-model="form.categoryId" filterable clearable placeholder="请选择商品类目" > <el-option v-for="item in category" :key="item.categoryId" :label="item.name" :value="item.categoryId" > </el-option> </el-select> </el-form-item> </el-form> 中的select 并且v-model绑定这个id 怎么做 同时我 data() { return { // 表单信息 form: { title: "", smallTitle: "", categoryId: "", manImage: [], dataUrl: [], skuList: [ { name: "", size: "", price: "", stock: "", attributeurl: "" }, ], },}
时间: 2023-07-03 18:04:22 浏览: 122
你可以通过以下代码实现:
```
// 在 mounted 钩子函数中获取数据并渲染到页面上
mounted() {
// 模拟异步请求数据
setTimeout(() => {
const data = [{name:'张三',categoryId:17},{name:'张三',categoryId:18},{name:'张三',categoryId:19},{name:'张三',categoryId:20}]
const item = data.find(item => item.categoryId === 17)
this.form.categoryId = item.categoryId
this.form.categoryName = item.name
}, 1000)
},
```
同时,你需要在 `form` 对象中添加一个 `categoryName` 属性来保存选中的类目名称,然后在 `<el-select>` 组件中使用 `categoryName` 属性来渲染选中的类目名称。
```
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="商品类目" prop="categoryId">
<el-select @focus="open" v-model="form.categoryId" filterable clearable placeholder="请选择商品类目" >
<el-option :key="item.categoryId" :label="item.name" :value="item.categoryId" v-for="item in category"></el-option>
</el-select>
<div slot="suffix">{{ form.categoryName }}</div>
</el-form-item>
</el-form>
```
阅读全文