Vue composable yields a string value

Question

Vue composable yields a string value

I am currently using a Vue composable method that looks like this:

import {
  ref
} from 'vue';

const useCalculator = (num1: number, num2: number, operation: string) => {
  const result = ref(0);

  switch (operation) {
    case 'add':
      result.value = num1 + num2;
      break;
    case 'sub':
      result.value = num1 - num2;
      break;
    case 'mul':
      result.value = num1 * num2;
      break;
    case 'divide':
      result.value = num1 / num2;
      break;
    default:
      result.value = 0;
  }

  return result;
}

After passing the params useCalculator(10,11,"add") to the function, I noticed that I received the unexpected result of "1011."

Despite specifying data types for the input parameters, it seems that the method is concatenating them as strings instead of performing the expected calculation.

javascript typescript vue.js

Answer 1

Answer №1

Your code looks good and there doesn't seem to be any issue. Since you are passing the parameters as numbers, they should concatenate properly resulting in 21. Additionally, by defining the parameter types in the function definition, any attempt to pass num1 or num2 as strings instead of numbers will throw an error during compile time.

Below is a working demo:

const { ref, onMounted } = Vue;

let options = {
  setup: function () {
    const useCalculator = (num1, num2, operation) => {
      const result = ref(0);
      switch (operation) {
        case 'add':
          result.value = num1 + num2;
          break;
        case 'sub':
          result.value = num1 - num2;
          break;
        case 'mul':
          result.value = num1 * num2;
          break;
        case 'divide':
          result.value = num1 / num2;
          break;
        default:
          result.value = 0;
      }
      return result.value;
    }

    onMounted(function () {
      console.log(useCalculator(10, 11, 'add'))
    });
  }
};

let app = Vue.createApp(options).mount('#app');

Answer 2

Your code looks good and there doesn't seem to be any issue. Since you are passing the parameters as numbers, they should concatenate properly resulting in 21. Additionally, by defining the parameter types in the function definition, any attempt to pass num1 or num2 as strings instead of numbers will throw an error during compile time.

Below is a working demo:

const { ref, onMounted } = Vue;

let options = {
  setup: function () {
    const useCalculator = (num1, num2, operation) => {
      const result = ref(0);
      switch (operation) {
        case 'add':
          result.value = num1 + num2;
          break;
        case 'sub':
          result.value = num1 - num2;
          break;
        case 'mul':
          result.value = num1 * num2;
          break;
        case 'divide':
          result.value = num1 / num2;
          break;
        default:
          result.value = 0;
      }
      return result.value;
    }

    onMounted(function () {
      console.log(useCalculator(10, 11, 'add'))
    });
  }
};

let app = Vue.createApp(options).mount('#app');

Answer 3

Answer №2

One important tip is to avoid declaring result as a const if it needs to be modified later on; in such cases, it's better to declare it using var instead.

Another suggestion is to skip specifying the type of variables in the function props and simply convert your inputs to numbers. For example:

var result = ref(0);
      const useCalculator = (num1, num2, operation) => {
      //Convert the inputs into floating-point numbers here
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        //If you only want integer numbers, you can also consider using parseInt()

        switch (operation) {
          case "add":
            result.value = num1 + num2;
            break;
          case "sub":
            result.value = num1 - num2;
            break;
          case "mul":
            result.value = num1 * num2;
            break;
          case "divide":
            result.value = num1 / num2;
            break;
          default:
            result.value = 0;
        }
        return result;
      };

Answer 4

One important tip is to avoid declaring result as a const if it needs to be modified later on; in such cases, it's better to declare it using var instead.

Another suggestion is to skip specifying the type of variables in the function props and simply convert your inputs to numbers. For example:

var result = ref(0);
      const useCalculator = (num1, num2, operation) => {
      //Convert the inputs into floating-point numbers here
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        //If you only want integer numbers, you can also consider using parseInt()

        switch (operation) {
          case "add":
            result.value = num1 + num2;
            break;
          case "sub":
            result.value = num1 - num2;
            break;
          case "mul":
            result.value = num1 * num2;
            break;
          case "divide":
            result.value = num1 / num2;
            break;
          default:
            result.value = 0;
        }
        return result;
      };

Vue composable yields a string value

Answer №1

Answer №2

Similar questions

Leveraging Discord.JS to seamlessly transport users in Discord to their designated voice channel by assigning roles

Setting a timeout from the frontend in the AWS apigClient can be accomplished by adjusting the

Progress of file uploads on the client side using Vue JS

ReactJS Components failing to load on initial site visit, only appearing after refreshing for the second time

Is there a way to set an image as the background of my HTML screen?

Error encountered while attempting to import external JSON data into SurveyJS

"Incorporate React Redux to dynamically load an endless stream of items in batches of x at a time

Error occurred while trying to fetch the Backbone.js collection due to undefined value of 'this._byId'

Error: Value of incoming scope in Angular Directive is not defined

Encountering a MiniCssExtractPlugin error while trying to build with npm

Eclipse - enhancing outline view by utilizing require.js define(...)

Locate a piece of text with jQuery and enclose it within a specified container

Issue with comparing strings in Typescript

Performing a single AJAX call from a JavaScript loop is more efficient than iterating through multiple AJAX calls

developing a checkbox group with Vue.js

Updating Angular 2 template based on specific conditions of model values

Efficiently organizing items within a list on Ionic

Ways to retrieve a property that is dynamically generated within a React component

Winning opportunities created by using credits in the slot machine

showing sections that collapse next to each other