VueJs：如何根据另一个元素更新元素的宽度？

Question

我正在构建一个 Trivia 应用程序，并且我有一个 <h1> 元素，该元素每 10 秒更改一次。我想将单选按钮组组件的宽度（b-form-group 是Bootstrap-Vue component）与<h1> 元素的宽度相匹配。像这样的：

每当question 的值发生变化时，我都尝试使用watchers 更新buttonWidth。但是，使用此代码，按钮组的宽度似乎与前一个问题的宽度匹配，而不是当前问题。我还尝试了其他属性，例如updated、mounted、created。我只是无法让它正常工作。有没有更简单的方法来匹配两个元素的宽度？

<template>
  <div>
    <div id="question">
       <h1 ref="quest">{{ question }}</h1>
    </div>

    <b-form-group>
      <b-form-radio-group :style=getWidth
        ref="opts"
        :options="options"
        buttons
        stacked
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-stacked"
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

在我的脚本下我有：

export default {
  props: ['question', 'options'],
  data() {
    return {
      buttonWidth: '0 px',
    };
  },
  methods: {
  },
  watch: {
    question() {
      // console.log('Updating button width to ', this.$refs.quest.clientWidth);
      this.buttonWidth = `width: ${this.$refs.quest.clientWidth}px;`;
    },
    // immediate: true,
  },
  computed: {
    getWidth() {
      return this.buttonWidth;
    },
  },
};

Answer 1

我的错误是使用了h1 标签的clientWidth。这不是以像素为单位返回文本的宽度，而是返回 div 的整个宽度。这是对我有用的解决方案：

<template>
  <div class="text-center center">
    <div id="question">
       <h1 ref="quest"><span ref="span">{{ question }}</span></h1>
    </div>

    <b-form-group>
      <b-form-radio-group :style=buttonWidth
        ref="opts"
        :options="options"
        buttons
        stacked
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-stacked"
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  props: ['question', 'options'],
  data() {
    return {
      buttonWidth: 'width: 500px',
      value: 0,
    };
  },
  watch: {
    question() {
      console.log('Watcher is updating buttonWidth to ', this.$refs.quest.clientWidth);
      this.$nextTick(() => {
        console.log(this.$refs.span.offsetWidth);
        this.buttonWidth = `width: ${this.$refs.span.offsetWidth}px;`;
      });
    },
  },
};
</script>

Answer 2

要使其与 watch 一起使用，您需要 $nextTick，否则组件将不会重新渲染，您仍将测量旧宽度：

watch: {
  question() {
    this.$nextTick(() => {
      this.buttonWidth = `width: ${this.$refs.quest.clientWidth}px;`;
    })
  }
}

还应该可以使用mounted 和updated 挂钩而不是watch 来实现此功能。如果你这样做，你不应该需要$nextTick。您提到您已经在问题中尝试过，但没有看到您尝试过的代码，很难知道为什么这对您不起作用。

另外，不清楚为什么你有一个名为getWidth 的计算属性。为什么不直接使用buttonWidth？