Introduce a jquery calendar plug-in into vue to discover that the click event of the plug-in is invalid?

want to achieve the following effect:

<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.jq22.com/demo/calendar201705062125/css/calendar.css">
<script src="http://www.jq22.com/demo/calendar201705062125/js/calendar.js"></script>
 <div id="bespeak-wrap">
    <div class="bw-head">
      <div class="city-select">
        <span></span>
      </div>
      <div class="search-box">
        <input type="search" placeholder="" v-model="searchText" @blur="search">
      </div>
    </div>
    <div id="calendar" class="calendar"></div> //
    <div>
    ....
    </div>
  </div>

new Vue({
  el: "-sharpbespeak-wrap"
})

there is a page in the project that requires a calendar mosaic to click on the page. Although the project uses vue.js, it does not use npm package management, like some popular vue components on the Internet cannot be used. I have to find plug-ins for jquery on the Internet, such as the code above. If you put the div of the id= "calendar" into the bespeak-wrap, the click event will not work? There is no problem if you put it outside the container. Is there any good solution?

Sep.30,2021

I don't know the specific usage of your plug-in, but you can try initializing the calendar plug-in in the mounted hook of vue

.
new Vue({
  el: '-sharpbespeak-wrap',
  mounted(){
    //calendar
  }
})
< hr >


this initialization code in the plug-in source code is written in the mounted hook

new Vue({
  el: '-sharpbespeak-wrap',
  mounted() {
    $('-sharpcalendar').calendar({
      ifSwitch: true, // 
      hoverDate: true, // hover
      backToday: true // 
    });
  }
})

load. Native try


how to solve the problem

Menu