js動態給當前點擊元素添加css類

1.頁面：

2.html代碼：

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

3.js代碼：

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

4.實現效果：

並且每次只能選中一個。