"萌新" 2022-05-31 17:10 采纳率: 100%
浏览 34
已结题

用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>

  • 写回答

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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 6月1日
  • 已采纳回答 6月1日
  • 创建了问题 5月31日

悬赏问题

  • ¥15 如何实现从tello无人机上获取实时传输的视频流,然后将获取的视频通过yolov5进行检测
  • ¥15 WPF使用Canvas绘制矢量图问题
  • ¥15 用三极管设计一个单管共射放大电路
  • ¥15 孟德尔随机化r语言运行问题
  • ¥15 pyinstaller编译的时候出现No module named 'imp'
  • ¥15 nirs_kit中打码怎么看(打码文件是csv格式)
  • ¥15 怎么把多于硬盘空间放到根目录下
  • ¥15 Matlab问题解答有两个问题
  • ¥15 LCD12864中文显示
  • ¥15 在使用CH341SER.EXE时不小心把所有驱动文件删除了怎么解决