CODEWITHSUNDEEP
nuxt.jsnuxt3.js
RmR
RmR

Reputation: 2283

Nuxt3 a simple client side update of data

I have done some past work using Nuxt2 and feel stupid that I cannot figure out how to accomplish a simple update of some local data in Nuxt 3. This is on the client side.

Here is the sample

index.vue

<template>
  <div>
     <div>{{ d }}</div>
     <button v-on:click="change">
  </div>
</div>

<script setup>
  let d = 1;

  function change() {
     // increment d
     d++
  }
</script>

The value does not change.

I tried browsing to see examples but all focus of Nuxt3 seems to be around async and fetch. I guess that is where the big changes have been made.

Is there any website that has a sample of a typical client app that shows how it is done in Nuxt2 and now in Nuxt 3.

Upvotes: 1

Views: 815

Answers (1)

RmR
RmR

Reputation: 2283

I figured it out

index.vue

<template>
  <div>
     <div>{{ d }}</div>
     <button v-on:click="change">
  </div>
</div>

<script setup>
  // need to import the functions required
  //import {ref} from 'vue' (not required) as pointed by a user

  // set the initial value
  let d = ref(1);

  function change() {
     // increment d's value
     d.value++
  }
</script>

Upvotes: 1

Related Questions