Javascript 如果单击按钮，下拉列表选项将更改（VueJS&；Laravel 6）

我想在单击表单中的按钮时更改下拉列表选项

我有一张有3个按钮的表格（会计、部门和出纳）

我希望我的交易下拉列表根据选择的部门更改选项

我已经为每个部门准备了这个JSON数组：

我想要的是，当我单击一个按钮时，该选项也会在我的事务下拉列表中更改。 例如，如果单击“注册器”，则下拉列表中只有注册器选项可用

现在，这是我的vue脚本，用于提取阵列以获取选项：

 <script>
    const app = new Vue({
        el:'#transactions',
        data:{
            trans:{}

        },
        mounted(){
            this.getTrans();
        },
        methods:{
            getTrans(){
                axios.get('http://localhost/dqrs/api/transactions')
                .then((response)=>{
                    this.trans=response.data
                    console.log(this.trans.acc);
                })

                .catch(function (error){
                    console.log(error);
                });
            }

        }
    })
</script>

const app=新的Vue({
el:'交易'，
数据：{
反式：{}
},
安装的（）{
this.getTrans（）；
},
方法：{
getTrans（）{
axios.get（）http://localhost/dqrs/api/transactions')
。然后（（响应）=>{
this.trans=response.data
console.log（这个trans.acc）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
})

我还想问一下，这是否适合为事务提取我的值：

---

整个代码应该是这样的：

不需要在装载时调用getTrans（）函数

制作模板

定义按钮点击功能

const app=新的Vue({
el:'交易'，
数据：{
反式：{}，
选项：[]
},
安装的（）{
axios.get（）http://localhost/dqrs/api/transactions')
。然后（（响应）=>{
this.trans=response.data；
this.options=this.trans.cas；
})
.catch（函数（错误）{
console.log（错误）；
});
},
方法：{
btn单击：功能（类别）{
如果（类别=‘现金’）{
this.options=this.trans.cas；
}else if（类别=‘帐户’）{
this.options=this.trans.acc；
}否则{
this.options=this.trans.reg；
}
}
})

选择交易。。。
{{option.name}

整个代码应该是这样的：

不需要在装载时调用getTrans（）函数

制作模板

定义按钮点击功能

const app=新的Vue({
el:'交易'，
数据：{
反式：{}，
选项：[]
},
安装的（）{
axios.get（）http://localhost/dqrs/api/transactions')
。然后（（响应）=>{
this.trans=response.data；
this.options=this.trans.cas；
})
.catch（函数（错误）{
console.log（错误）；
});
},
方法：{
btn单击：功能（类别）{
如果（类别=‘现金’）{
this.options=this.trans.cas；
}else if（类别=‘帐户’）{
this.options=this.trans.acc；
}否则{
this.options=this.trans.reg；
}
}
})

选择交易。。。
{{option.name}