VueJS新手求助：如何修改jQuery动态生成元素的背景图片

Hey there! Since the zoom_01-lens element is rendered dynamically by a jQuery plugin after page load, it isn't part of Vue's initial template—so Vue's data binding can't target it directly. But don't worry, you can still update its background image directly in your changeImage method using plain DOM manipulation (or jQuery, if your project already uses it).

Solution 1: Plain JavaScript #

Update your changeImage method to fetch the target image URL from the clicked thumbnail, then locate and modify the dynamic lens element:

var app = new Vue({
  el: '#app',
  methods: {
    changeImage: function(evt) {
      if (evt) evt.preventDefault();
      
      // 1. Get the large image URL from the clicked thumbnail's data attribute
      const largeImgUrl = evt.currentTarget.dataset.lgImg;
      
      // 2. Locate the dynamically generated magnifier lens element
      const lensElement = document.getElementById('zoom_01-lens');
      
      if (lensElement) {
        // 3. Preserve the existing background position (critical for magnifier functionality)
        const currentBackgroundPosition = lensElement.style.backgroundPosition;
        
        // 4. Update the background image while keeping the position
        lensElement.style.background = `url("${largeImgUrl}") ${currentBackgroundPosition} no-repeat scroll`;
      }
    }
  }
});

Solution 2: Using jQuery (if your project already includes it) #

If you're already using jQuery in your project, you can simplify the DOM selection and style update:

var app = new Vue({
  el: '#app',
  methods: {
    changeImage: function(evt) {
      if (evt) evt.preventDefault();
      
      // 1. Get the large image URL from the clicked thumbnail
      const largeImgUrl = $(evt.currentTarget).data('lg-img');
      
      // 2. Select the lens element and update its background
      const $lens = $('#zoom_01-lens');
      if ($lens.length) {
        const currentPos = $lens.css('background-position');
        $lens.css('background', `url("${largeImgUrl}") ${currentPos} no-repeat scroll`);
      }
    }
  }
});

Key Notes: #

• Why direct DOM manipulation is okay here: Vue's reactive system only manages elements it renders itself. Since the zoom_01-lens is created by an external jQuery plugin, Vue has no control over it—so direct DOM manipulation is the appropriate approach here.
• Preserve background position: Don't forget to keep the existing background-position value! The magnifier plugin uses this to align the lens with the main image, so removing it would break the zoom functionality.

内容的提问来源于stack exchange，提问作者Uttara Info Tech