基于element UI input组件自行封装“数字区间”输入框组件

Question

基于element UI input组件自行封装“数字区间”输入框组件

<template>
  <div class="main">
    <!-- 演示操作按钮模块 -->
    <div class="caseHeader">
      <div>
        <el-switch
            v-model="isDisabled"
            size="small"
            active-text="禁用"
            @change="switchChange"
        >
        </el-switch>
      </div>
      <div style="display: flex">
        <span>精度：</span>
        <el-input-number
            size="small"
            v-model="num"
            @change="precisionChange"
            :min="0"
            :max="10"
            label="描述文字"
        ></el-input-number>
      </div>
      <div>
        <el-button type="link" size="small" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 数字区间使用模块 -->
    <div class="numberRange">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="数字区间">
          <input-number-range
              :disabled="isDisabled"
              :precision="num"
              v-model="formData.numberRange"
          ></input-number-range>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import inputNumberRange from "@/components/inputNumberRange.vue";
export default {
  name: "TestCase",
  components: { inputNumberRange },
  data() {
    return {
      isDisabled: false, // 是否禁用
      num: 0, // 精度
      formData: {
        numberRange: [],
      },
    };
  },
  methods: {
    /** 重置方法 */
    reset() {
      this.formData.numberRange = [];
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  margin: 16px;
  position: relative;
}

.numberRange {
  width: 400px;
}

.caseHeader {
  width: 400px;
  display: flex;
  justify-content: space-between;
  margin: 24px;
}
</style>

我的重置为什么不可用

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你的重置方法可能不可用的原因是因为你的formData对象中的numberRange属性是一个数组，而在重置方法中你将其赋值为一个空数组。这可能会导致组件无法正确地更新和渲染。

要解决这个问题，你可以尝试使用 Vue 的$set方法来更新formData对象中的numberRange属性。这样可以确保 Vue 能够检测到数据的变化并更新组件的渲染。

你可以在重置方法中使用$set方法来更新numberRange属性，如下所示：

methods: {
  /** 重置方法 */
  reset() {
    this.$set(this.formData, 'numberRange', []);
  }
}

通过使用$set方法，你可以确保formData对象中的numberRange属性被正确地更新，从而使重置功能可用。