javascript - vue app中重新计算srcset，元素绑定(bind)

Question

我正在尝试在调整窗口大小时重新计算 srcset。我的模板中有一个图片元素，如下所示:

<picture>
  <source :srcset="{path-to-image}-lg.jpg" media="(min-width: 800px)">
  <source :srcset="{path-to-image}-md.jpg" media="(min-width: 400px)">
  <img id="my_image" :src="{path-to-image}-sm.jpg">
</picture>

使用以下事件监听器:

methods: {
  setSrc () {
    if (!this.selected) return

    let width = window.innerWidth
    let img = document.getElementById('selected_image')
    let fileWithExt = img.src.split('/').pop()
    let filename = fileWithExt.split('.')[0]
    let size = filename.split('-').pop() // all images end in '-sm', '-md', '-lg'
    let picture = img.parentElement

    if (
      (width < 400 && size !== 'sm') ||
      (width >= 400 && width < 800 && size !== 'md') ||
      (width > 800 && size !== 'lg')
    ) {
      let html = picture.outerHTML
      picture.outerHTML = html
    }
  }
},
created () {
  window.addEventListener('resize', this.setSrc)
},
beforeDestroy () {
  window.removeEventListener('resize', this.setSrc)
}

事件监听器完美地处理调整大小/媒体查询图像选择，但是，我意识到替换图片的 html 正在替换 DOM 中绑定(bind)到 vue 的元素，而不是绑定(bind)到 vue 的元素。所以我想我要反对的是:

1. 是否有更好的方法来处理调整大小以使用 Vue 重新计算 srcset？
2. 如果这最终是处理调整大小的最佳方式，是否有办法将图片元素重新绑定(bind)到 Vue？

Answer 1

@HusamIbrahim 所以我想使用为这种事情制作的原生 html5 元素，但由于我将不得不添加一些事件监听以动态设置键，我最终决定只用一个来处理整个事情v-如果，否则-如果，否则

模板更新:

<img v-if="breakpoint === 800" :src="selected.sizes.xl">
<img v-else-if="breakpoint === 400" :src="selected.sizes.lg">
<img v-else :src="selected.sizes.md">

我添加了 breakpoint 数据属性并使用此 getBreakpoint 方法动态设置它，我在 created() 上调用并设置了一个事件监听器:

getBreakpoint () {
  // if the window width divided by 400 rounded down returns a valid index
  // 0 thru 2, return the array item, else hardcode index to 2 and return 800
  this.breakpoint = [0, 400, 800][Math.floor(window.innerWidth / 400) <= 2 ? Math.floor(window.innerWidth / 400) : 2]
}