尝试处理Vue自定义选择框下拉列表时出错

Question

我正在处理自定义选择下拉列表，其中我有两个下拉列表，但一个下拉列表工作正常，但在选择第二个下拉列表时，我无法选择数据。

在js文件中，我可以看到数据，但对于第二个下拉列表，如何写入数据并将其传递给第二个列表。

const app = new Vue({
el: "#app",
name: 'aselect',
data: {
value: 'Select a Fruit',
list: ["Orange","Apple","Kiwi", "Lemon", "Pineapple"],
visible: false,
value2: 'Select a Fruit',
list2: ["Orange","Apple","Kiwi", "Lemon", "Pineapple"],
visible2: false
},
methods: {
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
},
toggle2() {
this.visible2 = !this.visible2;
},
select(option) {
this.value2 = option;
}
}
})

@import url('https://fonts.googleapis.com/css?family=Mogra|Roboto');
body {
background: STEELBLUE;
font-family: 'Roboto';
}
h1 {
color: #f9f9f9;
text-align: center;
font-size: 36px;
line-height: 1;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
font-family: "Mogra";
margin-bottom: 0;
text-shadow: 3px 4px 0px rgba(0,0,0,0.3);
}
.aselect {
width: 280px;
margin: 20px auto;
.selector {
border: 1px solid gainsboro;
background: #F8F8F8;
position: relative;
z-index: 1;
.arrow {
position: absolute;
right: 10px;
top: 40%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 10px solid #888;
transform: rotateZ(0deg) translateY(0px);
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.59,1.39,.37,1.01);
}
.expanded {
transform: rotateZ(180deg) translateY(2px);
}
.label {
display: block;
padding: 12px;
font-size: 16px;
color: #888;
}
}
ul {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16px;
border: 1px solid gainsboro;
position: absolute;
z-index: 1;
background: #fff;
}
li {
padding: 12px;
color: #666;
&:hover {
color: white;
background: seagreen;
}
}
.current {
background: #eaeaea;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
<div class="aselect" :data-value="value" :data-list="list">
<div class="selector" @click="toggle()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
<div class="aselect" :data-value="value2" :data-list="list2">
<div class="selector" @click="toggle2()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible2 }"></div>
<div :class="{ hidden : !visible2, visible2 }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>
</div>

工作代码笔https://codepen.io/dieser/pen/ZyOKmB

尝试复制下拉代码笔链接时出错https://codepen.io/santoshch/pen/QWpbPZr

Answer 1

代码笔中有一些错误

1.代码不在#app中

当安装vue应用程序时，您可以在main.js.中看到el: '#app'

所以只需将代码放入<div id="app>

2.重复方法select()

我可以看到您正试图从工作示例中复制方法select()。记住重命名该方法以避免重复的函数名。

TL；DR

这是正在工作的代码笔

Answer 2

您应该将select转换为一个组件，以实现代码的可重用性和隔离性。您可以使用props将不同的数据传递给选定的组件

创建像select2()这样的方法是个坏主意。

Codepen

Vue.component('my-select', {
template: `<div class="aselect" :data-value="value" :data-list="list">
<div class="selector" @click="toggle()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>`,
props: ['list'],
data: () => ({
value: 'Select a Fruit',
visible: false,
}),
methods: {
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
}
}
});
const app = new Vue({
el: "#app",
name: 'aselect',
data: {
list1: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
list2: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
}
})

@import url('https://fonts.googleapis.com/css?family=Mogra|Roboto');
body {
background: STEELBLUE;
font-family: 'Roboto';
}
h1 {
color: #f9f9f9;
text-align: center;
font-size: 36px;
line-height: 1;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
font-family: "Mogra";
margin-bottom: 0;
text-shadow: 3px 4px 0px rgba(0, 0, 0, 0.3);
}
.aselect {
width: 280px;
margin: 20px auto;
.selector {
border: 1px solid gainsboro;
background: #F8F8F8;
position: relative;
z-index: 1;
.arrow {
position: absolute;
right: 10px;
top: 40%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 10px solid #888;
transform: rotateZ(0deg) translateY(0px);
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.59, 1.39, .37, 1.01);
}
.expanded {
transform: rotateZ(180deg) translateY(2px);
}
.label {
display: block;
padding: 12px;
font-size: 16px;
color: #888;
}
}
ul {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16px;
border: 1px solid gainsboro;
position: absolute;
z-index: 1;
background: #fff;
}
li {
padding: 12px;
color: #666;
&:hover {
color: white;
background: seagreen;
}
}
.current {
background: #eaeaea;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-select :list="list1"></my-select>
<my-select :list="list2"></my-select>
</div>