javascript - 如何在不绑定(bind)的情况下获取容器元素的 HTML 标记并使用 VueJS 更改它的背景图像？

Question

我是 VueJS 的新手。目前，我面临一些问题。在我的 Vue 项目中，我有一个 DIV，它在点击时触发一个函数:

<div
  class="product-thumbnails-image-container"
  data-lowsrc="{{asset('img/220x220.png')}}"
  style="background-image:url(img/products/thumb.jpg)"
  v-on:click="changeImage"
  data-lg-img="img/products/large.jpg"
  data-sm-img="img/products/image.jpg"
  data-thumb-img="img/products/thumb.jpg"
></div>

我的 VueJS 实例如下所示:

var app = new Vue({
  el: '#app',
  methods: {
    changeImage: function(evt) {
      if (evt) evt.preventDefault();
      // chage background image here
    }
  }
});

在 Vue 元素容器中，HTML 元素在页面加载后由 jQuery 插件呈现。下面是:

<div
  id="zoom_01-lens"
  class="magnifier-lens"
  style="width: 208px; height: 208px; background: url("http://127.0.0.1:8000/img/products/anotherImage.jpg") -155px -28px no-repeat scroll; left: 154px; top: 27px;"
></div>

因为它不存在于我的 HTML 文件中，所以我无法将它与数据模型绑定(bind)。那么，如何在 changeImage() 函数触发时更改 zoom_01-lens 的背景图像？

Answer 1

Vue 可能无法很好地与 JQuery 插件一起使用。你的插件将与 DOM 交互，但 Vue 可以在它认为合适的任何时候覆盖 DOM 的任何部分，可能会破坏插件可能依赖的任何事件监听器。您真的应该寻找一个 Vue 插件来完成您的 JQuery 插件的功能。

如果你想让它们一起生活，把你的 changeImage() 函数放在全局范围内，在 Vue 之外，它可以访问 document。然后从 Vue 中调用它。这可能有效，但不是很干净。