Category: javascript

I have a request axios(vue):

.then(response => {
  history.pushState(null, null, response.request.responseURL);
}

Standart URL – http://localhost:30/shop. With this line, I complete the URL. in the end it will look like: http://localhost:30/shop?tags[]=5

But when I go to another page (http://localhost:30/shop/parts/2123 ) and then click the back button. Then I see not the page, but the response of the request (just text).

How i can resolve this problem?

upd: with FF working fine. Only when using google chrome.

I’m rendering a react app(Widget) inside Shadow DOM. So I looked at the div id where the widget is getting loaded currently.

See screenshow below.

With this information, I want to create Shadow host like this.

const host = document.querySelector('#widget-_hw');
const shadow = host.attachShadow({ mode: 'open' });
const renderIn = document.createElement('div');

But I’m getting this error.

Cannot read properties of null (reading 'attachShadow')

How do I give a property name that combines a string and integer?

I currently have a for loop that iterates through data and adds it to an object. I am creating the properties and values in each iteration. For example

for(let i = 0; i < 24; i++) {
    myObject.hour + i = {
        temp: data.hour[i].temp
    }
}

I have tried creating a variable such as

var hour = "hour" + i;

but that does not work because it doesn’t recognize me using the variable rather just the string “hour” as the property.
I was wondering if there is a simple solution. I currently have an array which contains each property name I want and just access that array in each iteration to assign the name.

I am trying to create a database using the first API call and the second API is getting the status of the created database. can anyone tell why it is not waiting for the status to be passed and marking the test cases to be passed in execution?

'Verify that new database created successfully': async function () {
        //const dataStartServer = syncSuite.loginInf.endpoint;
        const request = supertest(syncSuite.list.API_URL);
        const random = Math.floor(Math.random() * 30) + 1;
        const data = {
            'notifyMe': false
        };
        const res = await request
            .post(`${pathapi.create_server}DatabaseJ Server${random}`)
            .set('Cookie', syncSuite.list.Token, 'Host', syncSuite.list.API_URL,
                'Content-Type', 'application/x-www-form-urlencoded')
            .send(data);
        // .expect(200);
        //console.log('Status of server----------------------------', res.body)

        let uuid = res.body.uuid;
        //let createdServer = res.body.name

        let attemptsLeft = 30;
        const expectedValue = 'passed';
        const delayBetweenRequest = 60000;
        async function check() {
            const status_res = await request
                .get(`${pathapi.status_path}${uuid}`)
                .set('Cookie', syncSuite.list.Token, 'Host', syncSuite.list.API_URL,
                    'Content-Type', 'application/x-www-form-urlencoded')
                .send()
            // .expect(200);
            console.log('log---------------------------', status_res.body.status)
            if (status_res.body.status === expectedValue) {
                expect(status_res.body.status).to.be.eq(expectedValue)
            } else {
                attemptsLeft -= 1;
                console.log('Status of server----------------------------', status_res.body, attemptsLeft)
                if (!attemptsLeft) {
                    expect(false)
                }
                else {
                    setTimeout(check, delayBetweenRequest);
                }
            }
        }`enter code here`
        check();
    },

i hope im asking this question right but here is the bookmarklet im trying to edit
i want to change the clickable links to onclick javascript

javascript:!function(){var c=0x1f4,d=0x12c,e=’#AAA’,f=0x1,g=0x20,h=’#444′,i=’#FFF’,j=’Bookmarkletx20Links’,k=~~(document[‘documentElement’][‘clientWidth’]/0x2-c/0x2),l=~~(document[‘documentElement’][‘clientHeight’]/0x2-d/0x2),m=~~(0.8*g),n=document’createElement’;Object’assign’;var o=document’createElement’;Object’assign’;var p=document’createElement’;Object’assign’,p[‘textContent’]=j;var q=document’createElement’,r=~~((g-m)/0x2);Object’assign’;var s=document’createElement’;Object’assign’;var t=document’createElement’;t[‘textContent’]=’Clickx20thex20linksx20tox20openx20ax20newx20tab!’,s’appendChild’;var u=document’createElement’;[{‘name’:’Google’,’url’:’https://www.google.com’},{‘name’:’Bing’,’url’:’https://www.bing.com’},{‘name’:’DuckDuckGO’,’url’:’https://duckduckgo.com’}][‘forEach’](c=>{var d=document’createElement’,e=document’createElement’;e’setAttribute’,e’setAttribute’,e[‘textContent’]=c[‘name’],d’appendChild’,u’appendChild’;}),s’appendChild’,q[‘addEventListener’](‘click’,function c(d){q’removeEventListener’;o’removeChild’;n’removeChild’;n’removeChild’;document[‘body’]’removeChild’;},!0x1),q[‘textContent’]=’×’,o’appendChild’,o’appendChild’,n’appendChild’,n’appendChild’,document[‘body’]’appendChild’,function(c){var d=function(c){var d=c’getBoundingClientRect’,e=window[‘pageXOffset’]||document[‘documentElement’][‘scrollLeft’],f=window[‘pageYOffset’]||document[‘documentElement’][‘scrollTop’];return{‘top’:d[‘top’]+f,’left’:d[‘left’]+e};}(c[‘parentElement’]),e=!0x1,f={‘x’:0x0,’y’:0x0},g={‘x’:d[‘left’],’y’:d[‘top’]};c[‘parentElement’]’addEventListener’,c[‘parentElement’]’addEventListener’,document[‘addEventListener’](‘mousemove’,function(d){if(!e)return;var h={‘x’:d[‘clientX’]-f[‘x’],’y’:d[‘clientY’]-f[‘y’]},i={‘x’:g[‘x’]+h[‘x’],’y’:g[‘y’]+h[‘y’]};i[‘x’]<0x0?i[‘x’]=0x0:i[‘x’]+c[‘parentElement’][‘offsetWidth’]>document[‘documentElement’][‘clientWidth’]&&(i[‘x’]=document[‘documentElement’][‘clientWidth’]-c[‘parentElement’][‘offsetWidth’]);i[‘y’]<0x0?i[‘y’]=0x0:i[‘y’]+c[‘parentElement’][‘offsetHeight’]>document[‘documentElement’][‘clientHeight’]&&(i[‘y’]=document[‘documentElement’][‘clientHeight’]-c[‘parentElement’][‘offsetHeight’]);c[‘parentElement’][‘style’][‘left’]=i[‘x’]+’px’,c[‘parentElement’][‘style’][‘top’]=i[‘y’]+’px’;});}(o);}(window);

I have a ProjectPage.vue page that displays issues in a v-data-table. Projects are retrieved from a server api call in the sidebar and displayed there. After I choose a project, I would like to use that project’s id to get its issues from the server. Is it possible to do so using Vuex.
Is it possible using Vuex, that each project can use the same .js file to retreive its issues, since there could be any number of projects.

What I am trying to do is from VerticalNavMenu.vue, pass an id and project as props to ProjectPage, so I can pass the id as a parameter to mapAction inside ProjectPage to retreive its issues.

The I’m way doing it now is not working. The table has no data available when I open a project’s table

I hope Peoject_Pages.js helps understand what I’m asking about.

VerticalNavMenu.vue (related template lines are 38 -> 48)

<template>
  <v-navigation-drawer
    :value="isDrawerOpen"
    app
    expand-on-hover
    mini-variant-width="60px"
    floating
    width="260"
    class="app-navigation-menu"
    :right="$vuetify.rtl"
    @input="val => $emit('update:is-drawer-open', val)"
  >
    <!-- Navigation Header -->
    <div class="vertical-nav-header d-flex items-center ps-6 pe-5 pt-5 pb-2">
      <router-link to="/" class="d-flex align-center text-decoration-none">
        <v-slide-x-transition>
          <h2 class="app-title text--primary">ITrackerHub</h2>
        </v-slide-x-transition>
      </router-link>
    </div>

    <!-- Navigation Items -->
    <v-list expand shaped class="vertical-nav-menu-items pr-5">
      <nav-menu-link
        title="Dashboard"
        :to="{ name: 'dashboard' }"
        :icon="icons.mdiHomeOutline"
      ></nav-menu-link>

      <v-list>
        <v-list-group :prepend-icon="icons.mdiTelevisionGuide">
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="'My Projects'"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item v-for="(project, index) in ProjectList" :key="index">
            <v-icon class="mx-2">{{ icons.mdiAccountGroup }}</v-icon>
            <v-list-item-content>
              <router-link
                class="d-flex align-center text-decoration-none black--text"
                :to="{ name: 'ProjectPage', params: { id: project.id, project} }"
              >
                {{ project.title }}
              </router-link>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>

      <nav-menu-link title="My Issues" :to="{ name: 'MyIssues' }" :icon="icons.mdiBookEditOutline"></nav-menu-link>
      <nav-menu-link
        style="position:relative; top:70px;"
        title="Account Settings"
        :to="{ name: 'pages-account-settings' }"
        :icon="icons.mdiAccountCogOutline"
      ></nav-menu-link>

      <nav-menu-link
        style="position: relative; top: 200px"
        title="Create Project"
        :to="{ name: 'CreateProject' }"
        :icon="icons.mdiPlusMinus"
      ></nav-menu-link>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
// eslint-disable-next-line object-curly-newline
import {
  mdiHomeOutline,
  mdiAlphaTBoxOutline,
  mdiEyeOutline,
  mdiCreditCardOutline,
  mdiTable,
  mdiFileOutline,
  mdiFormSelect,
  mdiAccountCogOutline,
  mdiAccountGroup,
  mdiAccountMultiple,
  mdiTelevisionGuide,
  mdiBookEditOutline,
  mdiPlusMinus,
} from '@mdi/js'

// import NavMenuSectionTitle from './components/NavMenuSectionTitle.vue'
import NavMenuGroup from './components/NavMenuGroup.vue'
import NavMenuLink from './components/NavMenuLink.vue'
import { mapGetters, mapActions } from 'vuex'


export default {
  components: {
    // NavMenuSectionTitle,
    NavMenuGroup,
    NavMenuLink,
  },
 
  computed: {
    ...mapGetters(['ProjectList'])
  },
  

  methods: {
    ...mapActions(['fetchProjects'])
  },

  created() {
    // this.getProjectList()
    this.fetchProjects()
  },

  props: {
    isDrawerOpen: {
      type: Boolean,
      default: null,
    },
  },

  setup() {
    return {
      icons: {
        mdiHomeOutline,
        mdiAlphaTBoxOutline,
        mdiEyeOutline,
        mdiCreditCardOutline,
        mdiTable,
        mdiFileOutline,
        mdiFormSelect,
        mdiAccountCogOutline,
        mdiAccountGroup,
        mdiAccountMultiple,
        mdiTelevisionGuide,
        mdiBookEditOutline,
        mdiPlusMinus,
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.app-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.3px;
}

// ? Adjust this `translateX` value to keep logo in center when vertical nav menu is collapsed (Value depends on your logo)
.app-logo {
  transition: all 0.18s ease-in-out;
  .v-navigation-drawer--mini-variant & {
    transform: translateX(-10px);
  }
}

@include theme(app-navigation-menu) using ($material) {
  background-color: map-deep-get($material, 'background');
}

.app-navigation-menu {
  .v-list-item {
    &.vertical-nav-menu-link {
      ::v-deep .v-list-item__icon {
        .v-icon {
          transition: none !important;
        }
      }
    }
  }
}
</style>

NavBar.js

import axios from 'axios'

const state = {
    Projects: [],
}

const getters = {
    ProjectList: (state) => state.Projects
}

const actions = {
    async fetchProjects({ commit }) {
        const response = await axios.get('https://fadiserver.herokuapp.com/api/v1/my-projects/')

        commit('setProjects', response.data)
    }
}

const mutations = {
    setProjects: (state, Projects) => (state.Projects = Projects)
}

export default {
    state,
    getters,
    actions,
    mutations
}

ProjectPage.vue

<template>
  <v-card>
    <v-card-title class="text-center justify-center py-6">
      <h1 class="font-weight-bold text-h2 basil--text">
        {{ project.title }}
      </h1>
    </v-card-title>
    <v-tabs v-model="tab" background-color="primary" dark centered>
      <v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item v-for="item in items" :key="item.tab">
        <v-card flat>
          <v-card v-if="item.tab == 'Issues'">
            <template>
              <div class="text-center">
                <v-dialog v-model="dialog" width="500">
                  <template v-slot:activator="{ on }">
                    <v-btn class="success" dark v-on="on">
                      <v-icon align-self: left>
                        mdi-plus-thick
                      </v-icon>
                      Add Issue
                    </v-btn>
                  </template>
                  <v-card>
                    <v-card-title>
                      <h2>Add Issue</h2>
                    </v-card-title>
                    <v-card-text>
                      <v-form class="px-3">
                        <v-text-field v-model="title" label="Title"></v-text-field>
                        <v-textarea v-model="description" label="Description"></v-textarea>
                        <v-select
                          item-text="text"
                          item-value="value"
                          :items="time_est"
                          v-model="time_estimate"
                          label="Time Estimate"
                        ></v-select>

                        <v-select
                          item-text="title"
                          item-value="id"
                          :items="issueType"
                          v-model="issue_type"
                          label="Issue Type"
                        ></v-select>
                        <v-select
                          item-text="title"
                          item-value="id"
                          v-model="issue_status"
                          label="Issue Status"
                          :items="issueStatus"
                        ></v-select>
                        <v-select
                          item-text="title"
                          item-value="id"
                          :items="issueSeverity"
                          v-model="issue_severity"
                          label="Issue Severity"
                        ></v-select>
                        <v-spacer></v-spacer>
                        <v-btn
                          flat
                          @click="
                            postIssue()
                            reloadPage()
                          "
                          class="success mx-0 mt-3"
                        >
                          <v-icon align-self:left>mdi-content-save-check-outline</v-icon> Save</v-btn
                        >
                      </v-form>
                    </v-card-text>
                  </v-card>
                </v-dialog>
              </div>
            </template>

            <v-card>
              <v-data-table
                :headers="headers"
                :items="Project_Issues"
                item-key="full_name"
                class="table-rounded"
                hide-default-footer
                enable-sort
                @click:row="handleClick"
              >
              </v-data-table>
            </v-card>
          </v-card>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
import axios from 'axios'
import { mapGetters, mapActions } from 'vuex'

export default {
  props: ['id', 'project'],

  computed: {
    ...mapGetters(['Project_Issues']),
  },

  data() {
    return {
      tab: null,
      items: [{ tab: 'Issues' }, { tab: 'Calender' }, { tab: 'About' }],

      title: '',
      description: '',
      time_estimate: '',
      issue_type: '',
      issue_status: '',
      issue_severity: '',
      time_est: [
        { value: '1', text: '1' },
        { value: '2', text: '2' },
        { value: '3', text: '3' },
        { value: '4', text: '4' },
        { value: '5', text: '5' },
        { value: '6', text: '6' },
        { value: '7', text: '7' },
        { value: '8', text: '8' },
      ],
    }
  },

  setup() {
    return {
      headers: [
        { text: 'Title', value: 'title' },
        { text: 'Description', value: 'description' },
        { text: 'Estimate', value: 'time_estimate' },
        { text: 'Assignees', value: 'user' },
        { text: 'Type', value: 'issueType' },
        { text: 'Status', value: 'issueStatus' },
        { text: 'Severity', value: 'issueSeverity' },
      ],
    }
  },

  methods: {
    ...mapActions(['fetchProjectIssueList']),
  
    handleClick(issue) {
      this.$router.push({
        name: 'IssuePage',
        params: { id: issue.id, issue },
      })
    },
    postIssue() {
      axios
        .post('https://fadiserver.herokuapp.com/api/v1/my-issues/', {
          title: this.title,
          description: this.description,
          time_estimate: this.time_estimate,
          userid: 'f3260d22-8b5b-4c40-be1e-d93ba732c576',
          projectid: this.id,
          issueTypeId: this.issue_type,
          issueStatusId: this.issue_status,
          issueSeverityId: this.issue_severity,
        })
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    },
    reloadPage() {
      window.location.reload()
    },
  },
  mounted() {
    this.fetchProjectIssueList(this.id)
  },
}
</script>

<style scoped>
.v-btn {
  left: 43%;
}
</style>

Project_Page.js

import axios from 'axios'

const state = {
    issuesList: [],
}

const getters = {
    Project_Issues: (state) => state.issuesList
}

const actions = {
    async fetchProjectIssueList({ commit }, {projectid}) {
        const response = await axios.get('https://fadiserver.herokuapp.com/api/v1/my-issues-titles/?projectid=' + projectid)
    
        commit('setProjectIssues', response.data)
    },
}

const mutations = {
    setProjectIssues: (state, issuesList) => (state.issuesList = issuesList)
}

export default {
    state,
    getters,
    actions,
    mutations
}

I have a problem when trying to set selected option from javascript.
I created one select and added options with php from mysql like this:

<select class="form-control input-group-lg" name="progress" id="progress">
<?php
  if ($conn === false) {
    die("ERROR: Could not connect. " . mysqli_connect_error());
  }

  $sql = "SELECT * FROM progress";
  if ($result = mysqli_query($conn, $sql)) {
    if (mysqli_num_rows($result) > 0) {
      while ($row = mysqli_fetch_array($result)) {
        $id = $row['id'];
        $progress_name = $row['name'];
        echo "<option>$progress_name</option>";
      }
    }
    else {
      echo "<option>Fault!</option>";
    }
  }
  else {
    echo "$sql. " . mysqli_error($conn);
  }
  mysqli_close($conn);
?>
</select>

And then set selected option from javascript like this:

$('#progress').val("Value to set");

This method works fine and it sets selected option with that value which I want.

ANOTHER METHOD:

I have php file and I select data from database (MySQL) in json and then using ajax like this

$.ajax({
  url: 'data_control/orders/progress_select.php',
  type: 'get',
  method: "POST",
  data: {selected_value:selected_value},
  dataType: 'JSON',
  success: function (response) {
    var len = response.length;
    for (var i = 0; i < len; i++) {
      var progress_name = response[i].progress_name;
      var option = document.createElement("option");
      option.text = progress_name;
      option.value = progress_name;
      var select = document.getElementById('progress');
      select.appendChild(option);
    }
  }
});

Options are added successfully, but I can’t set selected value in this way:

$('#progress').val("Value to set");

Thanks for help!

I am not able to get the link to take me to the exact link that has been clicked. The id is supposed to be dynamically generated and one the link is clicked it takes to the event of that id that was clicked. Here is the code for the single event.

function EventListItem({ resource }: { resource: Resource<EventListItem> }) {
  const { loading, error, data } = useResource(resource);
  if (loading) return <p>Loading...</p>;
  if (error) return <div className="error">{error.message}</div>;
  
    const {id}: { id: string } = useParams(); 
  // const params = useParams()
  // console.log(params);
  return (
    <div data-event="cube">
      <div className={styles["event_container"]} >

        <h2>{data.name}</h2>
        <div className={styles["dates"]}>
          <h2>
            {data.start_time}
            {console.log(data)}
            {data.end_time}
          </h2>
          <h3>{data.type}</h3>
        </div>

        <div className={styles["block"]}>{data.description}</div>
        <div>stuff: {id}</div>
        <div className={styles["link"]}>
        {/* {`event/${id}`} */}
         <Link to={`/event/${id}`}>   
            Event Details
            {console.log(id)}
        </Link>
        </div>
        <hr className={styles["hr"]} />
      </div>
    </div>
  );
}

export default EventListItem;

And this is the code that maps through the events.

 const { loading, error, items } = useCollection<EventListItem>("/event");
  if (loading) return <p>Loading...</p>;
  if (error) return <div className="error">{error.message}</div>;
  console.log(items);

  
  return (
    // add event Id to enable load more feature
    <div>
      <div className={styles["header"]}>UPCOMING EVENTS</div>
      <div className={styles["event_container_1"]}>
        {items.map((item, i) => (
          <EventListItem key={i} resource={item} />
        ))}
      </div>
       <a href="#" id="loadMore">Load More</a>
    </div>
  );
};

export default EventList;

I have an array of objects. The path I am trying to use is “/:id.”
How can I return the entire object that matches that parameter? For example, I have
app.get(‘/:id’, (req, res) => {

let id = req.params.id


res.json("ID:" + req.params.id)

I understand that req.params uses whatever parameter you give it as the path. How can I return the entire object, that contains an ID of whatever parameter I pass in, rather than just ID: 15, if I type in /15 as the parameter?

I’m working on a bot and I want to set state of a button from enable to disabled.

here, I’m confused as if I should use setTimeout() to disable button after 20 seconds or leave it as it is. As setTimeout() is called everytime when user uses “!purchases” command.

setTimeout(() => {
    row.components[0].setDisabled(true);
    row.components[1].setDisabled(true);
    row.components[2].setDisabled(true);
    sentMessage.edit({
        content: 'You cannot interact with buttons now!',
        components: [row],
    });
}, 20000);

After what I’ve searched on google I’ve found that setTimeout() works in a async manner which mean if I’ve process1 as my main discord bots reply, process2, process3 and process4 are setTimeout() then node.js will not execute all these operations in parallel instead it will execute process1 if process2 is on fetching or sending data and vice versa.

Q0) is what I’ve found incorrect or has information missing?

Q1) So is it recommended in this scenario to use setTimeout()?

Q2) Will setTimeout() compound over the time or not?

Im working with the MapBox API and I want to customize the ‘UserLocate’ button such that it not only gives the current location but also sorts locations from the user. Here’s the current code of user locate.

navigator.geolocation.getCurrentPosition(position => { 
          user_lat = position.coords.latitude;
          user_long = position.coords.longitude;
      }); 

Currently I am only able to sort distance when I use the search box in MapBox. I am changing the longitude and latitude of the searched location of event object to current user’s longitude and latitude. From there I just use the methods availible on the doc

geocoder.on('result', (event) => {
          /* Get the coordinate of the search result */
          const searchResult = event.result.geometry;
          userLoc = searchResult;
          userLoc["coordinates"][0] = user_long;
          userLoc["coordinates"][1] = user_lat;
          // use userLoc to sort distances of stores

I dont get the event object on pressing the getCurrentPosition() so I can’t the same thing. How do I do that?

I’m trying fetch data every time user types something(using useEffect for that), also I want to delay fetch function using setTimeout, so when user stops typing, it should wait 3 second and then fetch github profiles, but when i type let’s say “giorgi”, after 3 seconds instead of getting only “giorgi” profiles, it waits 3 seconds goes through all of the past fetches, first rapidly renders profiles containing gi, after that gio, then gior and etc and finally only giorgi profiles. I think I’m doing something wrong in settimeout function or I’m not using it right.

useEffect(() => {
    const getSearchedProfile = async (searchValue) => {
        const api_url = 'https://api.github.com/search/users?q='+searchValue+'+in:login&per_page=20';
        const fetchProfile = await fetch(api_url);
        const profile = await fetchProfile.json();
            setProfiles(profile.items);
    }

    const getPoPularProfile = async () => {
        const api_url = 'https://api.github.com/search/users?q=repos:followers:%3E35000&language:javascript&page=1&per_page=10';
        const fetchProfile = await fetch(api_url);
        const profile = await fetchProfile.json();
            setProfiles(profile.items);
    }

    if(searchValue !== ''){
      setTimeout(() => {
        getSearchedProfile(searchValue);
        setShow(true);
      }, 3000);
    }

    if(searchValue === ''){
      setTimeout(() => {
        getPoPularProfile();
        setShow(false);
      }, 3000);
    }
}, [searchValue])

Is there a javascript operator that updates a regex in-place, such as:

let ip = ip.replace(regex, 'xxx');
ip    /= ip.replace(regex, 'xxx');

Similar to the other arithmetic operators, such as:

let x = x + 1;
x    += 1;

Helo,

I have an input to enter year for the credit card expiry date
How can i validate this input for an invalid 4 digits year and should accept only 4 digits onchange and should be greater then current year

const [year, setYear] = useState('');

function onSubmit(e) {
        e.preventDefault();
        dispatch(
            addPayment({
                card_holder: name,
                card_number: creditCardNo,
                expiration_month: month,
                expiration_year: year,
                card_type: creditCardType,
                cvc: cvv,
            }),
        );
        setCreditCardNo('');
        setName('');
        setCVV('');
        setMonth('');
        setYear('');
    }

 <div className={styles.sizeExtraSmall}>
    <input
     placeholder="Year"
     onChange={(e) => setYear(e.target.value)}
     required
     value={year}
     type="number"
   />
   <CreditCardSVG className={styles.profileIcons} />
 </div>

The code sample is for Vue3 composition API to handle a signup form. The intention is to disable the button after it’s pressed until the singin code(omitted) gets called only once.

Why is submitButton.value used vs. just the submitButton?

setup() {

const submitButton = ref<HTMLButtonElement | null>(null);

//Form submit function
const onSubmitLogin = (values) => {

  //Disable button
  /* eslint-disable  @typescript-eslint/no-non-null-assertion */
  submitButton.value!.disabled = true; 
}