vue function dont work when browser is refreshed

Question

my vue functions dont work when i manually refresh browser page. but works when i navigate from another vue component to this component it works fine. Please below is my code

UPDATE:

im using router-view within laravel application

@extends('layouts.starter')    
    <router-view> </router-view>
@endsection()


<template>
    <select class="form-control select" v-model="form.id" @change="getFee" required>
   <option disabled value="">Please select Class</option>
   <option v-for="level in levels" :value="level.id" :key="level.id">
      {{ level.name }}
   </option>
</select>

 <div class="form-group">
     <label>Fee </label>
     <input class="form-control" disabled type="number" v-model="form.fee">
 </div>
</template>
<script>
import useLevels from "../../composables/Levels";

export default {
  setup() {
    const {getlevels } = useLevels();

onMounted(getLevels);
 
const form = reactive({
    id: "",
    fee: '',
});

function getFee() {
   form.fee = localStorage.getItem(form.id + "_fee") || 0;
 }
}}
</script>

what's exactly not working? something not updating? something not rendered properly? some error is thrown? — captainskippah, Oct 04 '22 at 19:46
no error, @change="getFee" on select dont work when browser is refreshed, so v-model form.fee doesnt updates. but it does when navigate from another component to this — justice, Oct 04 '22 at 20:43
it doesnt also work when you paste direct link (http://localhost:8000/user/pay) in the browser — justice, Oct 04 '22 at 20:50
I don't think you are using the syntax correctly, please refer to https://vuejs.org/api/composition-api-setup.html#setup-context . — Cerceis, Oct 05 '22 at 01:58
since your Fee input is disabled anyway, have you tried just using `computed(() => localStorage.getItem(\`${form.id}_fee\`) ?? 0)`? and also i suggest to use `:value=""` instead of `v-model` since it's disabled anyway for readability purposes. it's not necessary. — captainskippah, Oct 05 '22 at 18:07
@Cerceis can you please elaborate more on where im not using it correctly. Im new to vue.js — justice, Oct 06 '22 at 00:36
thanks for suggestion @captainskippah. i have changed it as you said and it works. But the problem still persist. once i refresh the page using reload button or f5, it doesnt work. unless i navigate back and return using other links on my page through router.push() — justice, Oct 06 '22 at 00:50
i have noticed what was causing that. when i remove the select class (.select) on the select tag, everything works fine. Hope someone might find it helpful — justice, Oct 17 '22 at 17:05

score 0 · Accepted Answer · answered Oct 17 '22 at 17:09

i solved it by removing the select class on the select tag. Someone might find it helpful

new code

    <template>
         <select class="form-control" v-model="form.id" @change="getFee" required>
            <option disabled value="">Please select Class</option>
            <option v-for="level in levels" :value="level.id" :key="level.id">
              {{ level.name }}
          </option>
</select>

old code

<template>
             <select class="form-control select" v-model="form.id" @change="getFee" required>
                <option disabled value="">Please select Class</option>
                <option v-for="level in levels" :value="level.id" :key="level.id">
                  {{ level.name }}
              </option>
    </select>

vue function dont work when browser is refreshed

1 Answers1