in

Vue.JS TextBox Value is NaN when it should be a Number


I am creating an admin control panel where I want to display the AccountType of a user in a text box but the text box displays NaN when it should display a number representing the AccountType of the user.

<template>
  <div id="ChangeAccountType">
    <form @submit.prevent="changeAccountType">
      | <label for="accountType">Account Type </label>
      <input type="text" id="accountType" v-model="accountType"
             :value="currentAccountType"> // value should be a number, but is NaN
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "ChangeAccountType",
  props: {
    ID: {
      type: Number,
      required: true
    },
    currentAccountType: {
      type: Number,
      required: true
    }
  },
  data(){
    return {
      accountType: this.currentAccountType
    };
  },
  methods: {
    changeAccountType(){
      alert("Account type for user: " + this.ID + " is now: " + this.accountType);
    }
  }
}
</script>

This component contains it (I removed some methods that are unnecessary):

<template>
  <tr>
    <td>{{ userID }}</td> |
    <td>{{ username }}</td> |
    <td><button @click="requirePasswordOnNextLogin">Require Password on Next Login</button></td> |
    <td><button @click="changeAccountType">Change Account Type</button></td>
    <ChangeAccountType v-show="changeAccountTypeID"
                       :ID="userID"
                       :currentAccountType="accountType"></ChangeAccountType>
  </tr>
</template>

<script>
import ChangeAccountType from "@/components/AdminConsole/ChangeAccountType";

export default {
  name: "UserRow",
  components: {
    ChangeAccountType
  },
  props: {
    username: {
      type: String,
      required: true
    },
    userID: {
      type: Number,
      required: true
    },
    accountType: {
      type: Number,
      required: true
    }
  },
  data(){
    return {
      changeAccountTypeID: false
    };
  },
  methods: {
    changeAccountType(){
      this.changeAccountTypeID = !this.changeAccountTypeID;
    }
  }
}
</script>

And this contains UserRows:

<template>
  <div id="Console">
    <h1>Admin Console</h1>
    <table>
      <tbody>
        <tr>
          <th>User Account Management</th>
        </tr>
        <UserRow v-for="user in users" v-bind:key="user.ID" :username="user.username"
                 :account-type="parseInt(user.accountType)"
                 :userID="parseInt(user.ID)">
        </UserRow>
      </tbody>
    </table>
  </div>
</template>

<script>
import uds from "@/services/UserDataService.js";
import UserRow from "@/components/AdminConsole/UserRow";

export default {
  name: "Console.vue",
  components: {
    UserRow
  },
  data(){
    return {
      users: null
    }
  },
  async created(){
    const { data } = await uds.getAll();
    console.log("getAll: " + data);
    this.users = data;
  }
}
</script>

This is my output in the Console Log:
getAll: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

This is what my current output looks like:

This is what my desired output would look like:
Desired Output



Source: https://stackoverflow.com/questions/70718894/vue-js-textbox-value-is-nan-when-it-should-be-a-number

A 2048 game Built with ReactJS

Movie Ticket Reservation App made with Tkinter