'vuejs 3 composition API

Anyone know why the variable number doesn't display the latest value when click on it? I tried using onMounted, but didn't seem to do anything. When I clicked on the paragraph it always displays 1. I expect it to display the latest number added. Any ideas?


<script setup>

  import TheWelcome from '@/components/TheWelcome.vue'
  import { onMounted, ref  } from 'vue'
  import axios from "axios"

  let number = 1; 
    
  function getCurrentNumber() {
    
    number++;

    console.log(number)
  }

</script>


<template>

  <main>
    <TheWelcome />
  </main>
  <p @click="getCurrentNumber">Hello, this is a test to display {{number}}</p>

</template>
javascripthtmlvue.jsvuejs3php


Solution 1:[1]

This is how it should be

<script setup>
import { ref } from 'vue'

const number = ref(1); 

function getCurrentNumber() {
  number.value++
  console.log(number.value)
}
</script>


<template>
  <p @click="getCurrentNumber">Hello, this is a test to display {{ number }}</p>
</template>

Here is a working example.

Solution 2:[2]

use this

$count=DB::select("SELECT COUNT(*) as num FROM 'your-table-name' where status = 1 ")->get();

and you can access this by $count[0]->num

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu
Solution 2 Ossama Abd

Related Questions