账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue动态添加的dom如何绑定事件
    59
    -1

    初学vue写考试系统

    问题代码功能：为了生成单选题的ABCD选项
    原方案：

    <div v-if="todo2.answer1 != ''">A. {{todo2.answer1}}</div>
<div v-if="todo2.answer2 != ''">B. {{todo2.answer2}}</div>
<div v-if="todo2.answer3 != ''">C. {{todo2.answer3}}</div>
<div v-if="todo2.answer4 != ''">D. {{todo2.answer4}}</div>

    然后来了新需求：需要显示随机选项（增加抄袭难度），于是改成如下。
    选项变成动态增加的dom，然后增加了selkey方法来保存答案，然而selkey貌似没有工作。
    问：
    1.这个是vue事件绑定方法不对？selkey为何不工作？
    2.可能还是在用jquery的思维方式写代码，这个随机选项的功能，vue实现的思路该如何？

    <div v-html="randsmall(index,index2)"></div>
           methods: {
            randsmall: function(index,index2) {
                let q=this.all[index].questions[index2];
                console.log(this.all);
                let newarr=[];

                switch(q.qtype)
                {
                    case '单选':
                        if(q.answer1 != ''){
                            str='<div class="radio" v-on:click="selkey($event)" truekey="A'+q.qid+'"><label><input type="radio" name="Q'+q.qid+'">'+q.answer1+'</label></div>';
                            newarr.push(str);}
                        if(q.answer2 != ''){
                            str='<div class="radio" v-on:click="selkey($event)" truekey="B'+q.qid+'"><label><input type="radio" name="Q'+q.qid+'">'+q.answer2+'</label></div>';
                            newarr.push(str);}
                        if(q.answer3 != ''){
                            str='<div class="radio" v-on:click="selkey($event)" truekey="C'+q.qid+'"><label><input type="radio" name="Q'+q.qid+'">'+q.answer3+'</label></div>';
                            newarr.push(str);}
                        if(q.answer4 != ''){
                            str='<div class="radio" v-on:click="selkey($event)" truekey="D'+q.qid+'"><label><input type="radio" name="Q'+q.qid+'">'+q.answer4+'</label></div>';
                            newarr.push(str);}
                       }
                        shuffle(newarr);
                        return newarr.join('');
                        break;
                    case '多选':
                        //...;
                        break;
                    case '填空':
                        //...;
                        break;
                                   }

                return newarr.join('<br>');
            },
            selkey: function(e) {//保存答案代码
                console.log(e.currentTarget);
            }
        }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 -1 条
    • 空无一友 普通会员 1楼

      在Vue中，你可以使用$refs和on方法来动态添加DOM元素并绑定事件。以下是一个简单的例子：

      ```javascript // 假设我们有一个数据模型 var data = { name: 'John Doe', email: 'john.doe@example.com' };

      // 我们先添加一个新的DOM元素 var newElement = document.createElement('div'); newElement.textContent = data.name; document.body.appendChild(newElement);

      // 然后我们可以使用$refs属性来获取这个新的DOM元素 var ref = newElement.$refs.myRef;

      // 最后，我们可以使用on方法来绑定事件 ref.addEventListener('click', function() { console.log('Hello, world!'); }); ```

      在这个例子中，我们首先创建了一个新的div元素，并设置了它的文本内容。然后，我们使用$refs属性来获取这个新的DOM元素，并将其添加到body元素中。最后，我们使用on方法来绑定一个点击事件。

      注意，$refs属性的语法是newEl.$refs.myRef，其中newEl是你之前创建的新的DOM元素的引用。myRef是你想要绑定事件的元素的引用。

      另外，on方法会立即绑定事件，如果你想要延迟绑定事件，你可以使用addEventListener方法。例如：

      javascript ref.addEventListener('click', function() { console.log('Hello, world!'); }, false);

      在这个例子中，我们使用addEventListener方法来绑定一个点击事件，但是我们设置了第二个参数为false，这意味着事件只会在click事件被触发时被绑定。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部