Vue3 将 ref 定义为没有 typescript 的数字

Question

我有一个组成为 API 的 vue2 组件。在我定义的脚本设置部分

const val = ref(1);
onMounted(() => {
  val.value = props.maxVal; //maxVal exists
  console.log(val.value)
//log gives value as number
});
const diff = computed(() => {
  return props.maxVal - val.value;

最后一行给出错误Cannot convert object to primitive value 。 在日志中，根据需要，val.value 似乎是 integer。 怎么了？ 如何在没有 typescript 的情况下正确地在 Vue3 中投射一个 ref？

Answer 1

此代码示例正常工作

<template>
  <div>diff : {{ diff }}</div>
</template>

<script>
import {
  createComponent,
  computed,
  onMounted,
  ref,
} from "@vue/composition-api";

export default createComponent({
  name: "CompositionCounter",
  props: {
    maxVal: {
      type: Number,
      default: 15,
    },
  },
  setup(props) {
    const val = ref(1);
    onMounted(() => {
      val.value = props.maxVal - 10; //maxVal exists
      console.log(val.value);
      //log gives value as number
    });
    const diff = computed(() => {
      return props.maxVal - val.value;
    });

    return {
      diff,
    };
  },
});
</script>

Answer 2

如果您在computed()方法/属性中遇到异常，那么我认为您需要使用parseInt() or parseFloat() ie 将val.value为整数/浮点数

const diff = computed(() => {
  return props.maxVal - parseInt(val.value);
});

如果仍然遇到错误，则调试props.maxVal并尝试查找它是数字还是 object。如果是数字，请尝试以下代码段：

const diff = computed(() => {
  let evaluatedValue = parseInt(props.maxVal) - parseInt(val.value);
  props.maxVal = evaluatedValue;
  return evaluatedValue;
});