Javascript v-img的Vuetify动态高度

我有一个容器，它不是页面的100%高度，它的顶部和底部是80%加60px。 所以里面的图像应该继承容器的高度

使用

和一些CSS很容易实现，但我希望添加一个带有加载微调器的模板，因此我开始使用

来实现它

我可以看到，我可以设置

高度

或

最大高度

，因此我使用了一种方法来计算父级高度减去120px，以获得准确的图像高度，并且它按照预期工作

问题是，当用户调整窗口大小时，我可以看到要调用的方法并更新值，但vuetify元素不响应新值，因此图像比容器大或小：

该方法总是在屏幕调整大小时调用，但图像没有响应。

---

我怎么做？我还尝试将

wrapperHeight

移动为计算属性。

我认为您必须在

wrapperHeight

方法中返回

${height}px

，您需要将wrapperHeight设置为计算属性。这是正确的，比创建类似它的方法性能更好

data() {
  return {
    mounted: false
  }
},
mounted() {
  this.mounted = true
  window.addEventListener('resize', this.wrapperHeight)
  this.wrapperHeight()
},
methods: {
  wrapperHeight() {
    if (!this.mounted) return
    console.log(document.getElementById('photoWrapper').offsetHeight - 120)
    const height = document.getElementById('photoWrapper').offsetHeight - 120
    return height
  }
}

及

---

：max height=“wrapperHeight”不是：max height=“wrapperHeight（）”

解决方案是在计算方法和类似方法之间进行混合：

computed: {
      wrapperHeight() {
          if (!this.mounted) return
          console.log(document.getElementById('photoWrapper').offsetHeight - 120)
          const height = document.getElementById('photoWrapper').offsetHeight - 120
          return height
      }
  }

---

不幸的是，没有，vuetify accept

number | string

。您好，Vlad，请检查您的答案格式，您的反勾号已被stackoverflow标记引擎占用。尝试将其设为getter，而不是方法？这没有任何作用，因为vuetify accept 100或“100px”。您正在mounted中调用wrapperHeight（返回值未使用），还试图绑定到一个属性。如果要绑定，应该使用computed属性。这在这里不起作用，因为vue不知道何时触发它，因为document.*函数不是被动的。您可以将包装高度的结果分配给一个数据成员并使用它。请用更多的细节来充实它，让我们调试它。这是我的第一次尝试，我在问题的最后说了。。。不幸的是，它不起作用。它在开始时获取第一个值，然后在调整大小时不再触发计算属性。。。

computed: {
      wrapperHeight() {
          if (!this.mounted) return
          console.log(document.getElementById('photoWrapper').offsetHeight - 120)
          const height = document.getElementById('photoWrapper').offsetHeight - 120
          return height
      }
  }

data() {
  return {
    mounted: false,
    containerHeight:
      document.getElementById('photoWrapper').offsetHeight - 120
  }
},
computed: {
  wrapperHeight() {
    if (!this.mounted) return
    const height = this.containerHeight
    return height
  }
},
mounted() {
  this.mounted = true
  window.addEventListener('resize', _.debounce(this.handleResize, 100))
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.containerHeight =
      document.getElementById('photoWrapper').offsetHeight - 120
  }
}