js动态给当前点击元素添加css类

<div class="project-all">
<template v-for='(index,project) in projectData'>
<div class="project" v-on:click='projectSelectFun($event,index)'>{{project.projectName}}</div>
</template>
<div class="project" v-if='addp' v-on:click='addproject'>新增项目</div>
<div class="project" v-if='!addp'>
<input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject>
</div>
</div>

<script>
export default {
components: {

},
ready: function() {

},
methods: {
projectSelectFun: function(e,index) {
      //标记选中的project,因为selected是动态加载的,所以用el无法拿到当前的dom,因此用querySelector
var _dom = document.querySelector('.project.selected');
if (_dom) {
_dom.classList.toggle('selected');//当class为project的元素上没有这个CSS类时，它就新增这个CSS类；如果class为project的元素有了这个CSS类，它就是删除它。就是反转操作。
}
e.target.classList.toggle('selected');
this.searchData.params.project = this.projectData[index].id;
},
},
data() {
return {
addp: true, //是否显示添加项目
projectData: [{
id: '001',
projectName: '假数据1'
}, {
id: '002',
projectName: '假数据2'
}, {
id: '003',
projectName: '假数据3'
}, {
id: '004',
projectName: '假数据4'
}, {
id: '005',
projectName: '假数据5'
}, {
id: '006',
projectName: '假数据6'
}, {
id: '007',
projectName: '假数据7'
}, {
id: '008',
projectName: '假数据8'
}],
typeData: [{
id: '1',
typeName: '需求'
}, {
id: '2',
typeName: '问题'
}],
}
}
}
</script>