Как получить HTML-тег элемента контейнера без привязки и изменить его фоновое изображение с помощью VueJS? - PullRequest
Новая
       6

Как получить HTML-тег элемента контейнера без привязки и изменить его фоновое изображение с помощью VueJS?

0 голосов
/ 09 января 2019

Я новичок в 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-файле, я не могу связать его с моделью данных. Итак, как я могу изменить фоновое изображение zoom_01-lens при срабатывании функции changeImage()?

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Vue может плохо работать с плагинами JQuery. Ваши плагины будут взаимодействовать с DOM, но Vue может перезаписать любую часть DOM в любое время, когда сочтет нужным, потенциально обстреливая любых слушателей событий, от которых могут зависеть плагины. Вы действительно должны искать плагин Vue, который делает то, что делает ваш плагин JQuery.

Если вы хотите попытаться заставить их жить вместе, поместите вашу функцию changeImage() в глобальную область за пределами Vue, где она имеет доступ к документу. Тогда позвони из Vue. Это может сработать, но не очень чисто.

0 голосов
/ 09 января 2019

В вашем changeImage() вы можете изменить фон zoom_01-lens. Не уверены, что это именно то, что вам нужно, так как в этом решении у вас нет функции onClick для вашего zoom_01-lens

В приведенном ниже фрагменте я удалил ваши локальные пути к ресурсам. 

new Vue({
        el: "#app",
        data: {
            
        },
        methods: {
            changeImage() {
                let element = document.querySelector('#zoom_01-lens');
                element.style.backgroundColor = 'red'
            }
        }
    })
.product-thumbnails-image-container{
    width: 220px;
    border: 1px solid #000000;
}
.zoom_01-lens{
    width: 220px;
    border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
            <div class="product-thumbnails-image-container"  
            style="background-image:url(img/products/thumb.jpg)" 
            v-on:click="changeImage">click me</div>

            <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;"
            >This will change</div>

    </div>
...