If you get an element through ref in vue, how do you bind a click event to an element?

when using ivew"s rotation graph, some div, is added to the rotation diagram and the @ click event is bound, but a strange problem is found. Every time banner rotation is played, the bound click cannot be clicked, and only when the next banner is displayed can it be clicked

.

so I thought that getting this element through ref and dynamically adding a @ click event to it might solve my problem

so I want to ask how I should bind this element to the @ click event

now that I have obtained this element through ref.

=

this is a problem with the iview carousel graph component.
in < CarouselItem > , I wrote some div, to follow < CarouselItem > while carousel, in which there is a div bound with a @ click event,
but this button, every time the carousel reaches the current time, it cannot be clicked
for example, the first round can be clicked, and
the next round can be clicked, but it cannot be clicked.
has been clickable-not clickable-clickable-clickable

clipboard.png

`
< Carousel @ on-change= "bannerIndex" class= "banner-box" loop dots= "inside": autoplay= "! clickLQ": autoplay-speed= "4000" arrow= "hover": height= "600" > 

    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:"url(/static/images/banner_01.png)"}"></div>
      <div class="slogan-center" :class="{"en_slogan":$store.state.lang == "en" ? true:false}">
        <div class="text-slogan-name">{{$t("home.sloganName")}}</div>
        <div class="text-slogan-content">{{$t("home.sloganContent1")}}</div>
        <div class="text-slogan-content">{{$t("home.sloganContent2")}}</div>
        <img class="ball" src="/static/images/banner_ball2.png" alt="">
        <div class="coming-soon">{{$t("home.coming_soon")}}</div>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:"url(/static/images/banner_02.jpg)"}"></div>
      <div class="banner2">
        <div class="banner2_title">{{$t("home.banner2_title")}}</div>
        <div class="banner2_1_text">{{$t("home.banner2_1_text")}}</div>
        <div class="banner2_2_text">{{$t("home.banner2_2_text")}}</div>
        <div class="btn_login_register">
          <div v-if="!$store.state.login">
            <a :href="$store.state.trans_url+"/login"" class="btn_login" >{{$t("home.btn_login")}}</a>
            <a :href="$store.state.trans_url+"/register"" class="btn_register" >{{$t("home.btn_register")}}</a>
          </div>
          <div v-if="$store.state.login">
            <a :href="$store.state.trans_url+"/account/invite"" class="btn_yq" >{{$t("home.btn_yq")}}</a>
          </div>
          <div class="tips_text">
            {{$t("home.tips_text1")}} <span ref="bindClickYq" @click="lingquBtn(!$store.state.login ? true : $store.state.myInfo.airDropStatus ? true:false)">{{$t("home.tips_text2")}}</span>
          </div>
        </div>
      </div>
    </CarouselItem>
  </Carousel>
`
Vue.js javascript
Mar.30,2021

answer your question first

got this element through ref. How should I bind this element to the @ click event
if you have a div, this.$refs.dom of ref=dom that is directly this specific dom element, you can print it out, and then bind the event this.$refs.dom.addEventListener ('click',function () {});

then, it is recommended that you do not directly manipulate dom, in vue. It is similar to adding click events yourself. You can directly bind them in template @ click. The strange phenomena you mentioned appear, most of which are events bubbling. You can solve these problems through vue's ide/events.html-sharp%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6" rel=" nofollow noreferrer "> event modifier . Try it yourself first. If you don't post the code, it's difficult for me to judge whether the event is bubbling or not.

try this.$refs.dom.$el.addEventListener? (dom is the element you want to bind) because you want to bind a component, so get the element $el, under the component. If it is an ordinary html tag, you can this.$refs.dom.addEventListener it directly

.

Previous: When you deploy the Java program to the windows server with tomcat, you always report that a client with the same name already exists and will be disconnected this time.

Next: Mysql inserts a column, and when inserting data, if it starts from the first row, why is it affected by the previous column?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b41bd5-2c59b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b41bd5-2c59b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?