一页的组件基本相似,但填充了单独的数据和来自 Element-UI 的组件
var Main = {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
],
value: '',
optionss: [{
values: 'bKash',
label: 'bKash',
},
{
values: 'Rocket',
label: 'Rocket',
},
{
values: 'Bank A/C',
label: 'Bank A/C',
},
],
values: '',
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<div id="app">
<template>
<div>
<el-select v-model="value" placeholder="Select Account">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<br/><br/>
<div>
<el-select v-model="values" placeholder="Select Account">
<el-option
v-for="item in optionss"
:key="item.values"
:label="item.label"
:values="item.values">
</el-option>
</el-select>
</div>
</template>
</div>
一个组件工作正常,但 select 上的其他组件无法工作,但数据填充正确,为什么?
最佳答案
消息错误很明显你错过了第二个组件中的值,你在el-option
中写入:values
而不是:value
,但标签没问题,因此组件可以填充标签,但不能填充值。
var Main = {
data() {
return {
options: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
],
value: '',
optionss: [{
value: 'bKash',
label: 'bKash',
},
{
value: 'Rocket',
label: 'Rocket',
},
{
value: 'Bank A/C',
label: 'Bank A/C',
},
],
values: '',
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<div id="app">
<template>
<div>
<el-select v-model="value" placeholder="Select Account">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
value= {{value}}
</div>
<br/><br/>
<div>
<el-select v-model="values" placeholder="Select Account">
<el-option
v-for="item in optionss"
:key="item.values"
:label="item.label"
:value="item.value"> <!-- here was the error -->
</el-option>
</el-select>
values = {{values}}
</div>
</template>
</div>
关于javascript - 一个 vue 实例中具有多个数据的类似组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57707970/