设置密保问题，问题不重复设置

最新推荐文章于 2022-08-08 17:08:39 发布

原创最新推荐文章于 2022-08-08 17:08:39 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

11 篇文章

订阅专栏

Vue

10 篇文章

订阅专栏

本文详细介绍如何使用Vue框架设置密保问题，包括选择问题、输入答案及通过axios进行后端交互的过程。文章涵盖Vue组件数据绑定、事件监听及前后端通信等关键知识点。

 <div class="select_box">
    <div>   
       <label for="">问题1：</label>
       <select name="" class="psw_verify" v-model="model1" @change="getCouponSelected">
           <option :value="list1[0].id">{{list1[0].content}}</option>
           <option v-for="(value,index) in list2" :key="index" :value="value.id">{{value.content}}</option>
       </select>
   </div>
   <div>
       <label for="">答案：</label>
       <input type="text" class="input_select" v-model="answer1" maxlength="16">
   </div>
</div>
<div class="select_box">
    <div>   
        <label for="">问题2：</label>
        <select name=""  class="psw_verify" v-model="model2" @change="getCouponSelected">
            <option :value="list1[1].id">{{list1[1].content}}</option>
            <option v-for="(value,index) in list2" :key="index" :value="value.id">{{value.content}}</option>
        </select>
    </div>
   <div>
       <label for="">答案：</label>
       <input type="text" class="input_select"  v-model="answer2" maxlength="16">
   </div>
</div>
<div class="select_box">
  <div>   
      <label for="">问题3：</label>
      <select name="" class="psw_verify" v-model="model3" @change="getCouponSelected">
          <option :value="list1[2].id">{{list1[2].content}}</option>
          <option v-for="(value,index) in list2" :key="index" :value="value.id">{{value.content}}</option>
      </select>
  </div>
 <div>
     <label for="">答案：</label>
     <input type="text" class="input_select" v-model="answer3" maxlength="16">
 </div>
</div>

<script>
export default {
    data() {
        return {
            list:[],
            list1:[
                {"id":"1","content":"问题一"},
                {"id":"2","content":"问题二"},
                {"id":"3","content":"问题三"}],
            list2:[],
            model1:'',
            model2:'',
            model3:'',
            answer1:'',
            answer2:'',
            answer3:'',
            newQsErr:'',
            veList:[],
            veAnswer:'',
            veQs:'',
            qsVerifyErr:''
        }
    },
    methods:{
   ...
        //select选择
        getCouponSelected(){
            //console.log(this.model1,this.model2,this.model3);
            var m1=this.list.findIndex(item=>item.id==this.model1);
            var m2=this.list.findIndex(item=>item.id==this.model2);
            var m3=this.list.findIndex(item=>item.id==this.model3);
            this.list1=[];
            this.list1.push(this.list[m1],this.list[m2],this.list[m3]);
            this.list2=this.list.filter(item=>item.id!=this.model1&&item.id!=this.model2&&item.id!=this.model3);
        },
        //设置密保问题
        setQuestion(){
            if(this.answer1!=''&&this.answer2!=''&&this.answer3!=''){
                var qsList=this.list1;
                qsList[0].answer=this.answer1;
                qsList[1].answer=this.answer2;
                qsList[2].answer=this.answer3;
                qsList[0].qid=this.model1;
                qsList[1].qid=this.model2;
                qsList[2].qid=this.model3;
                var tt=JSON.stringify(qsList);
                var _this=this;
                this.axios.post('/safe/setQuestion',qs.stringify({data:tt,sid:_this.sid,skip:false})).then(function(res){
                    //console.log(res);
                    if(res.data.code==126000){
                        localStorage.setItem("ticket", res.data.object);
                        localStorage.setItem("sid", _this.sid);
                        _this.newQs=false;
                        _this.popShow=false;
                        _this.getUserInfo();
                    }else{
                        _this.newQsErr=res.data.message;
                    }
                }).catch(function(err){
                    console.log('设置密保问题:',err);
                })
            }else{
                this.newQsErr="答案不能为空"
            }
        }
    }

}
</script>