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

1

Я новичок в 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() функции changeImage()?

  • 0
    Вы должны связать фоновое изображение URL с одинарной кавычкой.
Теги:
vue.js
vue-component

2 ответа

1

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

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

0

В вашем 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>
  • 0
    Есть ли какой-нибудь механизм поиска Vue? Извлечь определенных детей из корня приложения?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню