Form stay filled with old values


#1

Hi everyone,

I’ve got a page which serves both for creating a new contact and editing an existing one (if there is an id or not in the url, the content will be pre-filled or not).

My issue: after having saved a new contact or edited an existing one, the page for creating a new one is now “filled” with the old values.

I say “filled”, because these values are linked to an object, and the object is correctly initialized as an empty object. So if I try to save the new contact, it will failed because the “model” is empty even if the view is filled…

How can I prevent the form from remember the previous values?

Thank you !

I am using f7 v1, vue.js, and I4m using the app-famework.

Below the source code:

<template>
	<f7-page name="contact-edit" class="page-contact-edit" :cached="false" :domCache="false">
		<f7-navbar :back-link="$lang('common-cancel')" sliding>
			<f7-nav-center sliding>
				{{ $route.params.contactId ? $lang('contactEdit-editContactTitle') : $lang('contactEdit-newContactTitle') }}
			</f7-nav-center>
			<f7-nav-right>
				<f7-link id="form-contact-edit-save">{{$lang('common-ok')}}</f7-link>
			</f7-nav-right>
		</f7-navbar>

		<form id="form-contact-edit">

			<f7-list>
				<f7-list-item>
					<f7-input type="text" name="firstname" v-model="contact.firstname" :placeholder="$lang('contactEdit-form-firstname')" />
				</f7-list-item>
				<f7-list-item>
					<f7-input type="text" name="lastname" v-model="contact.lastname" :placeholder="$lang('contactEdit-form-lastname')" :value="$route.params.contactId"/>
				</f7-list-item>
				<f7-list-item>
					<f7-input type="text" name="company" v-model="contact.company" :placeholder="$lang('contactEdit-form-company')" />
				</f7-list-item>
			</f7-list>

			<f7-list>
				<f7-list-item>
					<f7-icon slot="media" f7="at" class="contact-info-icons"></f7-icon>
					<f7-input type="text" name="email" v-model="contact.email" :placeholder="$lang('contactEdit-form-email')"/>
				</f7-list-item>
				<f7-list-item>
					<f7-icon slot="media" f7="phone" class="contact-info-icons"></f7-icon>
					<f7-input type="text" name="phone" v-model="contact.phone" :placeholder="$lang('contactEdit-form-phone')"/>
				</f7-list-item>
				<f7-list-item>
					<f7-icon slot="media" f7="social_linkedin" class="contact-info-icons"></f7-icon>
					<f7-input type="text" name="linkedin" v-model="contact.social.linkedinForm" :placeholder="$lang('contactEdit-form-linkedin')"/>
				</f7-list-item>
				<f7-list-item>
					<f7-icon slot="media" f7="social_facebook" class="contact-info-icons"></f7-icon>
					<f7-input type="text" name="facebook" v-model="contact.social.facebookForm" :placeholder="$lang('contactEdit-form-facebook')"/>
				</f7-list-item>
				<f7-list-item>
					<f7-icon slot="media" f7="social_twitter" class="contact-info-icons"></f7-icon>
					<f7-input type="text" name="twitter" v-model="contact.social.twitterForm" :placeholder="$lang('contactEdit-form-twitter')"/>
				</f7-list-item>
			</f7-list>

			<f7-list>
				<f7-list-item smart-select smart-select-back-on-select :title="$lang('contactEdit-form-minFrequency')">
					<select name="min-frequency" v-model="contact.minFrequencyText">
						<option value="day" :data-display-as="$lang('contactEdit-form-minFrequency-day')">{{$lang('contactEdit-form-minFrequency-everyDay')}}</option>
						<option value="week" :data-display-as="$lang('contactEdit-form-minFrequency-week')">{{$lang('contactEdit-form-minFrequency-everyWeek')}}</option>
						<option value="fortnight" :data-display-as="$lang('contactEdit-form-minFrequency-fortnight')">{{$lang('contactEdit-form-minFrequency-everyFortnight')}}</option>
						<option value="month" :data-display-as="$lang('contactEdit-form-minFrequency-month')">{{$lang('contactEdit-form-minFrequency-everyMonth')}}</option>
						<option value="trimester" :data-display-as="$lang('contactEdit-form-minFrequency-trimester')">{{$lang('contactEdit-form-minFrequency-everyTrimester')}}</option>
						<option value="semester" :data-display-as="$lang('contactEdit-form-minFrequency-semester')">{{$lang('contactEdit-form-minFrequency-everySemester')}}</option>
						<option value="year" :data-display-as="$lang('contactEdit-form-minFrequency-year')">{{$lang('contactEdit-form-minFrequency-everyYear')}}</option>
						<option value="frozen" :data-display-as="$lang('contactEdit-form-minFrequency-frozen')">{{$lang('contactEdit-form-minFrequency-everyFrozen')}}</option>
					</select>
				</f7-list-item>
				<f7-list-label>{{$lang('contactEdit-form-minFrequencyExplanation')}}</f7-list-label>
			</f7-list>

			<f7-list v-if="$route.params.contactId">
				<f7-list-button color="red" id="form-contact-edit-delete">{{$lang('contactEdit-deleteContact')}}</f7-list-button>
			</f7-list>
			
		</form>

	</f7-page>
</template>

<script>
import { Contact } from '../class/contact.class.js'
export default {
  data: function () {
    return {
      contact: new Contact()
    }
  },
  mounted: function () {
    console.log('contact-edit page is mounted.')
    var _this = this
    /* setTimeout(function() {
      document.getElementById("form-contact-edit").reset();
    }, 3000); */

    // If we are editing the contact, we fill all the inputs
    if (this.$route.params.contactId) {
      this.$fireFS(
        'users/' + this.$user.uid + '/contacts/' + this.$route.params.contactId
      ).onSnapshot(function (doc) {
        if (doc.exists) {
          console.log('Contact before load from DB', _this.contact.uid)
          _this.contact = new Contact()
          _this.contact.loadFromDB(doc.data(), doc.id)
          _this.$forceUpdate()
          console.log('Contact after load from DB', _this.contact.uid)
        }
      })
    } else {
      // else we ensure they are all empty
      console.log(_this.contact)
      document.getElementById('form-contact-edit').reset()
      this.contact = new Contact()
      console.log('Contact is new', this.contact.firstname)
      this.$forceUpdate()
    }

    // Click on Save button
    document
      .getElementById('form-contact-edit-save')
      .addEventListener('click', function () {
        console.log('Start saving a new contact')

        // We define our new Contact object and we do some input checks
        console.log(_this.contact)
        let newContact = _this.contact.exportToDB()
        console.log(newContact)

        // If we have the required information (at least a name), we attempt to save the contact
        if (newContact.name || newContact.firstname) {
          // If the contact already exist, we replace it
          if (_this.contact.uid) {
            _this
              .$fireFS(
                'users/' + _this.$user.uid + '/contacts/' + _this.contact.uid
              )
              .set(newContact)
              // If we successfully saved the contact
              .then(function (docRef) {
                console.log('Contact updated')
              })
              // If updating the contact failed
              .catch(function (error) {
                console.error('Error updating the contact: ', error)
                // We raise an alert to the user
                alert(_this.$lang('contactEdit-update-failedFirebase'))
              })
          } else {
            // else we create a new one
            _this
              .$fireFS('users/' + _this.$user.uid + '/contacts')
              .add(newContact)
              // If we successfully saved the contact
              .then(function (docRef) {
                console.log('New contact created with ID: ', docRef.id)
              })
              // If creating the contact failed
              .catch(function (error) {
                console.error('Error creating the contact: ', error)
                // We raise an alert to the user
                alert(_this.$lang('contactEdit-save-failedFirebase'))
              })
          }

          // We reset the "contact edit" form
          _this.contact = new Contact()
          _this.$f7.initSmartSelects('.page-contact-edit') // update the "smart select" value
          // We close the "contact edit" page
          _this.$router.back()
        } else {
          alert(_this.$lang('contactEdit-save-failedMissInformation'))
        }
      })

    // Click on Delete button
    if (document.getElementById('form-contact-edit-delete')) {
      document
        .getElementById('form-contact-edit-delete')
        .addEventListener('click', function () {
          _this.$f7.confirm(
            'The deletion of the contact cannot be undone.',
            'Are you sure?',
            function () {
              console.log('Start deleting the contact')
              _this
                .$fireFS(
                  'users/' + _this.$user.uid + '/contacts/' + _this.contact.uid
                )
                .delete()
                .then(function () {
                  console.log('Contact successfully deleted!')
                })
                .catch(function (error) {
                  console.error('Error deleting contact: ', error)
                })
              // We close the "contact edit" page
              _this.$router.back()
            }
          )
        })
    }
  }
}
</script>

#2

Try to use value + @input instead of v-model like:

<f7-input :value="someValue" @input="someValue = $event.target.value">

#3

Thank you for your answer. I’ve tried, and sadly, it doesn’t solve the issue :frowning: