Javascript 尝试使用Vue自定义选择框下拉列表时出错？

我正在使用自定义选择下拉菜单，其中我有两个下拉菜单，但其中一个可以正常工作，但在选择第二个下拉菜单时，我无法选择数据

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

const-app=新的Vue({
el:“应用程序”，
名称：'aselect'，
数据：{
值：“选择一个水果”，
清单：[“橙子”、“苹果”、“猕猴桃”、“柠檬”、“菠萝”]，
可见：假，
值2:'选择一个水果'，
清单2:[“橙子”、“苹果”、“猕猴桃”、“柠檬”、“菠萝”]，
可见2：错误
},
方法：{
切换（）{
this.visible=！this.visible；
},
选择（选项）{
该值=选项；
},
切换2（）{
this.visible2=！this.visible2；
},
选择（选项）{
this.value2=选项；
}
}
})

@导入url（'https://fonts.googleapis.com/css?family=Mogra|机器人'；
身体{
背景：钢蓝；
字体系列：“Roboto”；
}
h1{
颜色：#f9f9f9；
文本对齐：居中；
字体大小：36px；
线高：1；
字体大小：300；
字母间距：3px；
文本转换：大写；
字体系列：“莫格拉”；
页边距底部：0；
文本阴影：3px4px0pxRGBA（0,0,0,0.3）；
}
.选择{
宽度：280px；
保证金：20px自动；
.选择器{
边框：1px实心gainsboro；
背景：#f8f8；
位置：相对位置；
z指数：1；
.阿罗{
位置：绝对位置；
右：10px；
最高：40%；
宽度：0；
身高：0；
左边框：7px实心透明；
右边框：7px实心透明；
边框顶部：10px实心#888；
变换：旋转（0deg）平移（0px）；
过渡时间：0.3s；
过渡计时功能：立方贝塞尔（.59,1.39,37,1.01）；
}
.扩大{
变换：旋转（180度）平移（2倍）；
}
.标签{
显示：块；
填充：12px；
字体大小：16px；
颜色：#888；
}
}
保险商实验室{
宽度：100%；
列表样式类型：无；
填充：0；
保证金：0；
字体大小：16px；
边框：1px实心gainsboro；
位置：绝对位置；
z指数：1；
背景：#fff；
}
李{
填充：12px；
颜色：#666；
&：悬停{
颜色：白色；
背景：海格林；
}
}
.当前{
背景：#eaeaea；
}
.隐藏{
可见性：隐藏；
}
.可见{
能见度：可见；
}
}

{{value}}

{{item}

{{value}}

{{item}

您的系统中有一些错误

1.应用程序中没有代码 安装vue应用程序时，您可以在main.js中看到

el:'#app'

---

因此，只需将代码放在

中，您就应该将select转换为一个组件，以实现代码的可重用性和隔离性。您可以使用
props

创建像
select2（）
这样的方法是个坏主意



Vue.component（'my-select'{
模板：`
{{value}}

{{item}

`,
道具：[“列表”]，
数据：（）=>({
值：“选择一个水果”，
可见：假，
}),
方法：{
切换（）{
this.visible=！this.visible；
},
选择（选项）{
该值=选项；
}
}
});
const app=新的Vue({
el:“应用程序”，
名称：'aselect'，
数据：{
清单1:[“橙子”、“苹果”、“猕猴桃”、“柠檬”、“菠萝”]，
清单2:[“橙子”、“苹果”、“猕猴桃”、“柠檬”、“菠萝”]，
}
})
@导入url（'https://fonts.googleapis.com/css?family=Mogra|机器人'；
身体{
背景：钢蓝；
字体系列：“Roboto”；
}
h1{
颜色：#f9f9f9；
文本对齐：居中；
字体大小：36px；
线高：1；
字体大小：300；
字母间距：3px；
文本转换：大写；
字体系列：“莫格拉”；
页边距底部：0；
文本阴影：3px4px0pxRGBA（0,0,0,0.3）；
}
.选择{
宽度：280px；
保证金：20px自动；
.选择器{
边框：1px实心gainsboro；
背景：#f8f8；
位置：相对位置；
z指数：1；
.阿罗{
位置：绝对位置；
右：10px；
最高：40%；
宽度：0；
身高：0；
左边框：7px实心透明；
右边框：7px实心透明；
边框顶部：10px实心#888；
变换：旋转（0deg）平移（0px）；
过渡时间：0.3s；
过渡计时功能：立方贝塞尔（.59,1.39,37,1.01）；
}
.扩大{
变换：旋转（180度）平移（2倍）；
}
.标签{
显示：块；
填充：12px；
字体大小：16px；
颜色：#888；
}
}
保险商实验室{
宽度：100%；
列表样式类型：无；
填充：0；
保证金：0；
字体si