I’m trying to use Ionic-Vue to develop a mobile application. My problem is summarized by two examples. I apologize if I think including any code to illustrate the problem isn’t necessary.
Case 1: I tried making a form which contains say a Log In. I enter data to the input box and then change the submit button text value in code and save it. The page clears out the data in the form which I don’t expect.
Case 2: I tried making a counter that starts from 0 which increments with successive Count Up button presses. However, if I change the button text value of the counter button to Count Up by 1, the counter value resets back to 0 - a behavior which I don’t expect.
As stated in the Vue3 docs, the value of counter should persist even if I change the button text.
This GIF comes from the docs, this is what I expect. The counter value should stay on hot-reloads even if I change other UI elements.
An alternate code I used for testing is as follows:
<template>
<div id="app">
<div class="counter">
{{ counter }}
</div>
<div class="count-up-btn">
<!--
If I change this text to say 'Count Up by 1'
the counter resets again. =(
-->
<button @click="countUp">Count Up by 1</button>
</div>
<div class="count-down-btn">
<button @click="countUp">Count Down</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const counter = ref(0);
function countUp() {
counter.value += 1;
}
function countDown() {
counter.value -= 1;
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here, the value of counter is reset to 0 when I change other UI elements. I think this might affect development in the future such as when developing long forms and then I want to change label values on the fly whilst retaining the form state.
I tried using Nuxt (for web, not with Ionic) and this problem doesn’t exist.
