用es6箭头函数思想，怎样实现id和name同时满足json数组中的数据


<body>
        <div id="app">
            <h2>查询</h2>
            <hr/>
            <input type="text" v-model="id"/>
            <input type="text" v-model="name"/>
            <button @click="search">搜索</button>
            <hr/>
            <p>
                查询结果如下：
                {{this.$store.getters.search}}
                <hr/>
                以无序列表方式显示：<br/>
                <ul>
                    <li v-for="item in this.$store.state.todos">{{item}}</li>
                </ul>
            </p >
        </div>
        <script>
            //创建状态管理对象
            const store=new Vuex.Store({
                state:{
                    todos:[
                        {id:123,name:'小明',flag:true},
                        {id:123,name:'小红',flag:false},
                        {id:125,name:'jack',flag:true},
                        {id:126,name:'张三',flag:true},
                        {id:125,name:'rose',flag:true}
                    ],
                    id:0
                },
                mutations:{
                    search(state,id){
                        state.id=id
                    }
                },
                getters:{
                    search:state=>{
                        return state.todos.filter(todo=>todo.id==state.id)
                    }
                }
            })
            
            var vm=new Vue({
                el:'#app',
                data:{
                    id:'',
                    name:''
                },
                store,
                methods:{
                    search(){
                        this.$store.commit('search',this.id)
                    }
                }
            })
            
        </script>
    </body>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

Heerey525 前端领域新星创作者 2022-06-01 00:04

关注

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <body>
    <div id="app">
        <h2>查询</h2>
        <hr/>
        <input type="text" v-model="id"/>
        <input type="text" v-model="name"/>
        <button @click="search">搜索</button>
        <hr/>
        <p>
            查询结果如下：
            {{this.$store.getters.search}}
            <hr/>
            以无序列表方式显示：<br/>
            <ul>
                <li v-for="item in this.$store.state.todos">{{item}}</li>
            </ul>
        </p >
    </div>
    <script crossorigin="anonymous" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
    <script crossorigin="anonymous" integrity="sha512-Tkxwo8dZEZTmje5QT9uodCqe2XGbZdBXU8uC4nskBt0kwR99Anzkz8JCSMByfoqjLTHcTuIB8fsmED3b9Ljp3g==" src="https://lib.baomitu.com/vuex/3.6.2/vuex.min.js"></script>
    <script>
        //创建状态管理对象
        const store=new Vuex.Store({
            state:{
                todos:[
                    {id:123,name:'小明',flag:true},
                    {id:123,name:'小红',flag:false},
                    {id:125,name:'jack',flag:true},
                    {id:126,name:'张三',flag:true},
                    {id:125,name:'rose',flag:true}
                ],
                id:0,
                name:""
            },
            mutations:{
                setId(state,id){
                    state.id=id
                },
                setName(state,name){
                    state.name=name
                }
            },
            getters:{
                search:state=>{
                    return state.todos.filter(todo=>todo.id==state.id && todo.name==state.name)
                }
            }
        })
        
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:''
            },
            store,
            methods:{
                search(){
                    this.$store.commit('setId',this.id)
                    this.$store.commit('setName',this.name)
                }
            }
        })
        
    </script>
</body>

</body>
</html>