如果单击按钮，下拉列表选项会更改（VueJS 和 Laravel 6）答案

【问题标题】：Dropdowndown list options changes if a button is clicked ( VueJS & Laravel 6)如果单击按钮，下拉列表选项会更改（VueJS 和 Laravel 6）
【发布时间】：2020-06-07 09:16:09
【问题描述】：

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

我有一个包含 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>

我也想问一下这是否适合拉动我的交易价值：

【问题讨论】：

标签： javascript php mysql laravel vue.js

【解决方案1】：

整个代码应该是这样的：

在挂载时不需要调用 getTrans() 函数。
制作模板。

定义按钮点击函数

<script>
    const app = new Vue({
        el:'#transactions',
        data:{
            trans:{},
            options: []
        },
        mounted(){
            axios.get('http://localhost/dqrs/api/transactions')
                .then((response)=>{
                    this.trans=response.data;
                    this.options = this.trans.cas;
                })
                .catch(function (error){
                    console.log(error);
                });
        },
        methods:{
            btnClick: function(category) {
                if (category == 'cash') {
                    this.options = this.trans.cas;
                } else if (category == 'account') {
                    this.options = this.trans.acc;
                } else {
                    this.options = this.trans.reg;
                }
        }
    })
</script>

<template>
    <div>
        <div class="d-flex">
            <button v-on:click="btnClick('cash')"></button>
            <button v-on:click="btnClick('account')"></button>
            <button v-on:click="btnClick('register')"></button>   
        </div>
        <select v-for="option in options" :key="option.id">
            <option disabled selected>Choose Transaction...</option>
            <option value="option.val">{{option.name}}</option>
        </select>
     </div>
</template>

【讨论】：