最好的方法避免 vue 3 输入组件上的 eslint 错误，它将一个值分成两个

Question

请看下面代码

    <template>
      <input type="text" v-model="amount" />
      <select v-model="type">
        <option value="CR">Cr</option>
        <option value="DR">Dr</option>
      </select>
    </template>
    
    <script>
    import { computed } from "vue";
    
    export default {
      name: "balanceNew",
      props: ["modelValue"],
      setup(props, { emit }) {
        function setValue(amount, type) {
          let v = Number(amount);
          if (type === "CR") v = v * -1;
          emit("update:modelValue", v);
        }
    
        const amount = computed({
          get() {
            return Math.abs(Number(props.modelValue));
          },
          set(v) {
            setValue(v, type.value);
          },
        });
    
        const type = computed({
          get() {
            if (Number(props.modelValue) < 0) return "CR";
            return "DR";
          },
          set(v) {
            setValue(amount.value, v);
          },
        });
    
        return { amount, type };
      },
    };
    </script>

在这个组件中，两个值作为输入，作为输出，另一个计算值。现在，如果禁用了 eslint，上面的代码就可以工作了，否则它会在 setter 的数量中显示 'type' is not defined。

我尝试了相同过程的多种组合，即使使用 ref 和 watcher，但似乎没有任何效果（没有增加太多复杂性）或像上面的代码那样优雅。

在使用 this 的 vue 2 选项 api 中更简单（是的，我知道我可以在 vue 3 中使用选项 api，但其他逻辑在组合中api 而且我不想为此添加选项 api。）

所以有人有任何替代方法可以在不禁用 eslint 的情况下工作相同（并且易于理解）吗？（甚至不是单行）

更新

尽管接受的答案完全符合我的要求，但欢迎使用更多替代方法。

Answer 1

如果您愿意，将它们嵌套在对象中可以解决此问题：

export default {
  name: "balanceNew",

  props: ["modelValue"],

  setup(props, { emit }) {
    function setValue(amount, type) {
      let v = Number(amount);
      if (type === "CR") v = v * -1;
      emit("update:modelValue", v);
    }

    const store = {
      amount: computed({
        get() {
          return Math.abs(Number(props.modelValue));
        },
        set(v) {
          setValue(v, store.type.value);
        }
      }),

      type: computed({
        get() {
          if (Number(props.modelValue) < 0) return "CR";
          return "DR";
        },
        set(v) {
          setValue(store.amount.value, v);
        }
      })
    }

    return { ...store };
  }
}

最好的方法避免 vue 3 输入组件上的 eslint 错误，它将一个值分成两个

Best way avoid eslint error on vue 3 input component which splits one value into two

vue.js

vuejs3

vue-composition-api

更新