Question

在我的vue模板中添加加载后，jquery似乎不再起作用了：

var element = document.getElementById('vue-project')
  if (element !== null) {
    var getData = await axios.get('./data-project.json')
    var specimen = new Vue({
      el: '#vue-project',
      created() {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
      data: {
        items: getData.data,
        loading: true
      }
    })
  }

$('.cell-item a').on('click', function(event) {
    event.preventDefault()
    consol.log(this)
    consol.log('I am clicked')
})

模板：

<!-- vue template -->
<div id="vue-project">

    <div v-if="loading" class="row row-loader" data-aos="fade-down">
        <div class="grid-x grid-padding-x align-center-middle text-center">
            <div class="cell small-4 text-center">
                <div class="spinner"></div>
            </div>
        </div>

    </div>

    <!-- vue - loop -->
    <template v-else v-for="item in items">

        <div class="row row-scale" data-aos="fade-up">
            <div class="grid-container">
                <div class="grid-x grid-padding-x grid-items">

                    <!-- loop projects in each item -->
                    <template v-for="(project, index) in item">
                    <div class="large-3 cell cell-item text-center">
                        <a href="#">
                            <img :src="project.image_src" :alt="project.image_alt">
                        </a>
                        <h2 class="heading-project">{{ project.title }}</h2>
                    </div>
                    </template>
                    <!-- loop project in each item -->

                </div>
            </div>
        </div>

    </template>
    <!-- vue - loop -->

</div>

我甚至将jquery部分放在mounted方法中：

var element = document.getElementById('vue-project')
if (element !== null) {
    var getData = await axios.get('./data-project.json')
    var specimen = new Vue({
      el: '#vue-project',
      created() {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
      data: {
        items: getData.data,
        loading: true
      },
      mounted () {
        $('.cell-item a').on('click', function(event) {
            event.preventDefault()
            consol.log(this)
            consol.log('I am clicked')
        })
      }
    })
}

但它仍然无效。

有什么想法吗？

Answer 1

没有理由在jQuery中编写事件处理程序。在Vue外部修改DOM总是有问题的，因为Vue不知道这些修改，所以当Vue需要重新渲染DOM的那部分时，你的事件绑定和任何其他外部更改都将被抛弃。 / p>

如果您正在使用Vue，使用Vue 。

<a href="#" v-on:click="foo">
    <img :src="project.image_src" :alt="project.image_alt">
</a>

...

methods: {
    foo() {
       // your click handler code here
    }
}

将加载器添加到Vue对象后，jQuery单击事件停止工作

1 个答案: