为什么在编辑模式下打开时,element-ui 的 el-select 组件只显示 id(FK)而不是标签?
Why when opening in edit mode, the el-select component of element-ui only shows me the id (FK) and not the label?
为什么在编辑模式下打开时,element-ui 的 el-select 组件只显示 id(FK)而不显示标签?
我正在将 php laravel 7 与 vuejs 2 和元素 ui 一起用于应用程序。
我遇到的问题是在执行原始文件时,特别是在编辑时。
当我用el-select从另一个table(FK)填充数据时,一切正常,但在编辑时,只有另一个"id" table 出现,而不是标签。
我在另一个例子中看到它运行良好,我的错误是什么?
- api 的结果是:
{
"data":[
{
"id":17,
"path":"Perifericos"
},
{
"id":26,
"path":"Perifericos/Almacenamiento"
}
]
}
- 带有元素的vue@2.6.10代码-ui
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :md="16">
<el-card v-loading="loading" class="box-card">
<div slot="header" class="clearfix">
<strong>{{ titleText }}</strong>
</div>
<el-form
ref="Form"
label-position="left"
:model="Form"
>
<div>
<el-row :gutter="20">
<el-col :md="16">
<el-form-item label="Nombre" prop="nombre">
<el-input v-model="Form.nombre" size="large" />
</el-form-item>
</el-col>
</el-row>
</div>
<el-col :md="8">
<el-form-item label="Categoriax">
<el-select v-model="Form.product_ecommerce_menufilter_id" placeholder="Selecciona empresa...">
<el-option
v-for="emp in categoryProducts"
:key="emp.id"
:label="emp.path"
:value="emp.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
<!-- /.app-container -->
</template>
<script>
import ProductResource from '@/api/product';
// import UploadImage from '@/views/components/UploadImage';
const Resource = new ProductResource();
import { get } from '../../api/api';
export default {
// components: { UploadImage },
data() {
return {
id: null,
mode: null,
loading: true,
titleText: '',
categoryProducts: [],
product_ecommerce_menufilter_id: '',
Form: {},
};
},
created() {
this.mode = this.$route.meta.mode;
this.titleText = this.$route.meta.title;
this.getProductCategoryPath();
if (this.mode === 'edit') {
this.id = this.$route.params.id;
Resource.get(this.id).then(response => {
this.Form = response.data;
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id + '';
this.loading = false;
});
} else {
this.loading = false;
}
},
methods: {
getProductCategoryPath() {
get('api/products/catalogpathecommerce')
.then(res => {
if (res.data) {
this.categoryProducts = res.data.data;
}
})
.catch(error => {
this.$message({ type: 'error', message: 'Error al cargar Empresas, consulte al Administrador' });
console.log(error);
});
},
},
};
</script>
enter image description here
select 中的 v-model 和选项的键必须来自同一类型,否则它不起作用。
在你的情况下 product_ecommerce_menufilter_id
是 string
而 'emp.id' 是 int
。
所以要修复它,您可以更改此:
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id + '';
into(假设 product_ecommerce_menufilter_id 存储为 int)
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id;
为什么在编辑模式下打开时,element-ui 的 el-select 组件只显示 id(FK)而不显示标签?
我正在将 php laravel 7 与 vuejs 2 和元素 ui 一起用于应用程序。 我遇到的问题是在执行原始文件时,特别是在编辑时。
当我用el-select从另一个table(FK)填充数据时,一切正常,但在编辑时,只有另一个"id" table 出现,而不是标签。
我在另一个例子中看到它运行良好,我的错误是什么?
- api 的结果是:
{
"data":[
{
"id":17,
"path":"Perifericos"
},
{
"id":26,
"path":"Perifericos/Almacenamiento"
}
]
}
- 带有元素的vue@2.6.10代码-ui
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :md="16">
<el-card v-loading="loading" class="box-card">
<div slot="header" class="clearfix">
<strong>{{ titleText }}</strong>
</div>
<el-form
ref="Form"
label-position="left"
:model="Form"
>
<div>
<el-row :gutter="20">
<el-col :md="16">
<el-form-item label="Nombre" prop="nombre">
<el-input v-model="Form.nombre" size="large" />
</el-form-item>
</el-col>
</el-row>
</div>
<el-col :md="8">
<el-form-item label="Categoriax">
<el-select v-model="Form.product_ecommerce_menufilter_id" placeholder="Selecciona empresa...">
<el-option
v-for="emp in categoryProducts"
:key="emp.id"
:label="emp.path"
:value="emp.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
<!-- /.app-container -->
</template>
<script>
import ProductResource from '@/api/product';
// import UploadImage from '@/views/components/UploadImage';
const Resource = new ProductResource();
import { get } from '../../api/api';
export default {
// components: { UploadImage },
data() {
return {
id: null,
mode: null,
loading: true,
titleText: '',
categoryProducts: [],
product_ecommerce_menufilter_id: '',
Form: {},
};
},
created() {
this.mode = this.$route.meta.mode;
this.titleText = this.$route.meta.title;
this.getProductCategoryPath();
if (this.mode === 'edit') {
this.id = this.$route.params.id;
Resource.get(this.id).then(response => {
this.Form = response.data;
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id + '';
this.loading = false;
});
} else {
this.loading = false;
}
},
methods: {
getProductCategoryPath() {
get('api/products/catalogpathecommerce')
.then(res => {
if (res.data) {
this.categoryProducts = res.data.data;
}
})
.catch(error => {
this.$message({ type: 'error', message: 'Error al cargar Empresas, consulte al Administrador' });
console.log(error);
});
},
},
};
</script>
enter image description here
select 中的 v-model 和选项的键必须来自同一类型,否则它不起作用。
在你的情况下 product_ecommerce_menufilter_id
是 string
而 'emp.id' 是 int
。
所以要修复它,您可以更改此:
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id + '';
into(假设 product_ecommerce_menufilter_id 存储为 int)
this.Form.product_ecommerce_menufilter_id = response.data.product_ecommerce_menufilter_id;