vue2 有那种思路可以实行这种联动的效果

Question

问题： 点击微信监听支付状态，点击支付状态监听支付方式。然后显示对应的页面

我用watch 监听后保存在data请求，的确可以实现，但是总觉得代码量多了，而且基本上都是一样的，就是请求的接口的数据不太一样，问问还有什么更好的办法解决吗

Answer 1

可以同一个处理函数，data中配置个query对象，change事件设置query对应的数据项后调用axios查询数据什么的
示例代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <select v-on:change="setQueryData" data-key="paytype">
        <option value="">选择支付方式</option>
        <option value="1">微信</option>
        <option value="2">支付宝</option>
        <option value="3">银联</option>
    </select>
    <select v-on:change="setQueryData" data-key="paystate">
        <option value="">选择订单状态</option>
        <option value="1">待支付</option>
        <option value="2">已支付</option>
    </select>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            query: {}
        },
        methods: {
            setQueryData(e) {
                //如果使用了第三方的select组件，自己改这里的逻辑
                var el = e.target;
                this.query[el.dataset.key] = el.value;
                var query = JSON.parse(JSON.stringify(this.query));
                console.log(query)
                //发送query参数进行查询的代码。。。。
            }
        }
    })
</script>

有帮助或启发麻烦点下【采纳该答案】