vue第二次ajax失效,第二次点击下拉框触发vue事件按钮失效

问题描述

第二次点击下拉框触发vue事件按钮失效

问题出现的环境背景及自己尝试过哪些方法

本人新手，求大神指点

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

--请选择--

{{value}}

{{running?'停!':'开始'}}

重置

function campaignChange() {

var campaignid = document.getElementById("campaign").value;

$.ajax({

url: 'member.php?campaignid='+campaignid,

type: 'GET',

async: true,

contentType: 'application/json; charset=UTF-8',

dataType: 'json',

success: function(response) {

if(document.getElementById("myCanvas")){

var element=document.getElementById("myCanvas");

element.parentNode.removeChild(element);

//window.location.reload();

}

var canvas = document.createElement('canvas');

canvas.id = 'myCanvas';

canvas.width = document.body.offsetWidth;

canvas.height = document.body.offsetHeight;

document.getElementById('main').appendChild(canvas);

new Vue({

el: '#tools',

data: {

selected: 30,

running: false,

btns: [

30, 10, 5, 2, 1

]

},

mounted() {

canvas.innerHTML = createHTML();

TagCanvas.Start('myCanvas', '', {

textColour: null,

initial: speed(),

dragControl: 1,

textHeight: 14

});

},

methods: {

reset: function() {

},

onClick: function(num) {

},

toggle: function() {

}

}

});

}

})

}

你期待的结果是什么？实际看到的错误信息又是什么？

第二次点击下拉菜单时button失效，无法点击，请大神指点

因为每次点击都会新建myCanvas，所以我把之前创建的删除了

if(document.getElementById("myCanvas")){

var element=document.getElementById("myCanvas");

element.parentNode.removeChild(element);

//window.location.reload();

}