如何在AmazeUI中当改变select标签后触发Vue方法的问题

发表于 更新于 分类于 本文字数： 1.7k 阅读时长 ≈ 2 分钟

首先

我是一个有全栈梦的程序猿，但是写前端对我来说实在是有些难受，这个假期在大学社团中我负责一个项目的后端与后台管理界面，不得不要写页面，那么借此机会也来学一下Vue和前端的基础。

我希望看到这篇博文中的人对本文解决方案的有改进方法的朋友能够在留言区或Telegram中进行沟通，谢谢！

问题描述

在使用AmazeUI这套后台模板时，碰到了我原来没有遇到过的问题。我想每次在更改select标签中的option选项时都调用Vue对象中的一个方法,将所选option的value值弹出来。但是使用Vue的@change时没办法监听AmazeUI中select标签的改变。因为我刚刚学习Vue还有很多地方不懂，一开始怀疑自己的语法可能有问题，但是我在一个全新的HTML页面中尝试了我的语法发现并没有遇到问题。于是我开始仔细观察AmazeUI后台模板中的这个select标签，发现它有一个特别的属性:data-am-selected="{btnSize: 'sm'}"后来经过搜索得知这个AmazeUI的一个样式，如果将它删掉那么可以通过Vue监听改变下拉框的事件，但是样式就丢失了，所以经过翻阅博客和自己尝试最终找到了一个在我这里可用的解决方案。

解决方案

在尝试解决问题的过程中，我发现原生js的onclick可以监听到AmazeUI中select的更改选项option的事件！
那么是否可以通过原生js的onclick触发的事件去调用Vue中的methods的方法呢？

于是我在原生JS的onclick中调用了Vue对象list的getAll()方法。问题解决！

HTML

1
2
3
4
5
6
7
<select  data-am-selected="{btnSize: 'sm'}" onchange="list.getAll()" v-model="choice_option">
    <option value="1">正常状态</option>
    <option value="0" >待审核状态</option>
    <option value="-1">未通过审核状态</option>
    <option value="2" selected>全部歌曲</option>
</select>
<p>value={{choice_option}}</p>

JS

1
2
3
4
5
6
7
8
9
10
11
12

var list = new Vue({
    el: '#lists',
    data: {
        choice_option: "2",
    },
    methods: {
        getAll:function () {
            alert("触发事件")
        }
    }
})

结尾

总的来说就是用原生js去调用Vue中的方法，或许这个问题比较低级，我一度不想写这个博文，因为可能会被喷哈哈。但是《暗时间》中提到过小问题也要写博文，这样能在字里行间在进行一次咀嚼，大脑短期记忆的容量有限但是相对计算机而言存储空间可以无限的。不管怎么样我会选择花些时间去整理这次困扰到我的问题。希望能给遇到同样问题的朋友提供帮助，也希望能收到大家的留言来提供更好的解决方法。谢谢。

我是一名Linux初学者，如果你与我一样喜欢折腾，喜欢Linux，那么请加入我的电报群https://t.me/yeefire_blog，在这里畅所欲言，共同学习进步。