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

Posted 2023-02-22

【中文标题】如果单击按钮，下拉列表选项会更改（VueJS 和 Laravel 6）

【英文标题】：Dropdowndown list options changes if a button is clicked ( 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>

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

【参考方案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>