Cannot be triggered by the callback function clicked by vue?

problem description

in the single file component of vue. I bound a click event to a div. A handleCityClick method is triggered, and the interface shows that click has been bound to the div, but the callback method is not triggered?

the environmental background of the problems and what methods you have tried

wants to get the content of the button clicked to change the value of city in state, but the method cannot trigger the
method name has also been changed, @ click= "handleCityClick" with parentheses seems to be useless,
has nothing to do with the position of the mounted hook, and the
console has not reported an error.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<div class="button-list">
  <div
    class="button-wrap"
    v-for="item of hots"
    :key="item.id"
    @click="handleCityClick()"
  >
    <div class="button">{{item.name}}</div>
  </div>
</div>

export default {
  name: "CityList",
  props: {
    hots: Array,
    cities: Object,
    letter: String
  },
  methods: {
    handleCityClick () {
      debugger
      alert(1)
    }
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}

what result do you expect? What is the error message actually seen?

if you want to get the content of clicking div, there is no error message

Sep.22,2021

in your vue single file component, why is the html part not placed in the template,js section and not in the script

<template>
    <div class="button-list">
      <div
        class="button-wrap"
        v-for="item of hots"
        :key="item.id"
        @click="handleCityClick()"
      >
        <div class="button">{{item.name}}</div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'CityList',
  props: {
    hots: Array,
    cities: Object,
    letter: String
  },
  methods: {
    handleCityClick () {
      debugger
      alert(1)
    }
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

try to change it like this?


Google takes a look at the developer tools, finds the corresponding DOM and looks at the Event Listeners, and then you can see the binding events.
clipboard.png


the first time you run the project after restarting the computer, the function is called. But I took out the debugger, saved it and couldn't call it again, so adding it back to debugger still has no effect. Project restart is still invalid


write an element to bind a function without debugger ,
and then press your debugger to restart the project

you didn't follow the rules of the game. Of course there's a problem. Template try

.
Menu