如何使用 vuejs computed 属性评估文本区域的最大长度？

Question

我在表单中有一个文本区域，我用它来写一些东西的描述。但是，最大字符限制为 5。我正在尝试使用计算的属性来计算我的描述的最大长度。但是，不知何故，当描述的长度超过 5 个字符的限制时，计算的属性不会触发。以下是我的简单代码。

  props: {
    infoData: {
      type: Object,
      default: () => {
        return {
          category: "",
          side_categories: "",
          description: "",
          commentValidationState: null
        };
      }
    },
  },
  computed: {
    descriptionValidation(){
      if(this.infoData.description?.length > 5){
        alert("Max length exceeded!");
      }
    }
  }

请注意，我在计算属性中直接使用了prop。

我的HTML:

  <b-form-group
          class="col-md-12"
          label="Beschreibung"
          label-for="description"
          invalid-feedback="maximal 750 Zeichen"
          :state="infoData.commentValidationState"
      >
        <b-textarea
            class="form-control"
            name="description"
            id="description"
            v-model="infoData.description"
        />
      </b-form-group>

Answer 1

计算属性必须 return 某些计算的结果。在这里，观察者会更合适。在这种情况下，要观察的值是 this.infoData.description 的长度。因此，我会首先使用计算的属性来获取 this.infoData.description 的长度，然后使用观察者来监视它的值。

这是我的实现：

<template>
  <div>
      <!--- Component HTML -->
   </div>
</template>

<script>
export default {
  props: {
    infoData: {
      type: Object,
      default: () => {
        return {
          category: "",
          side_categories: "",
          description: "",
          commentValidationState: null
        };
      }
    },
  },
  watch: {
    descriptionLength(new_value){
      if(new_value> 5){
        alert("Max length exceeded!");
      }
    }
  },
  computed: {
    descriptionLength(){
      return this.infoData.description?.length
    }
  }
}
</script>

这是它的父级：

<template>
  <div>
    <textarea v-model="infoData.description" />
    <MyComponent :infoData="infoData" />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      infoData: {
          category: "",
          side_categories: "",
          description: "",
          commentValidationState: null
      }
    }
  },
}
</script>

如何使用 vuejs computed 属性评估文本区域的最大长度？

How to evaluate max length of a text area using vuejs computed property?

javascript

vue.js

computed-properties

如何使用 vuejs computed 属性 评估文本区域的最大长度？

How to evaluate max length of a text area using vuejs computed property?

javascript

vue.js

computed-properties

如何使用 vuejs computed 属性评估文本区域的最大长度？