Issues with el-radio-group functionality arise upon returning to the page from a different location

My Vuejs el-radio-group currently has 2 values, 'Yes' and 'No', with 'Yes' being the default selected value. However, if I switch the selection to 'No', then navigate to another page and return using the browser's back button, the default value is not reset to 'Yes'. Additionally, the el-radio-group stops functioning properly, making it impossible to switch between values.
I would like the default value to be 'Yes' again upon returning to the page.
Below is my code:

<el-radio-group v-model="choice">
     <el-radio-button
          label="yes"
     >
     </el-radio-button>
     <el-radio-button
           label="no"
     >
     </el-radio-button>
</el-radio-group>

<div @click="clickHere"> Click Here </div>
........

data () {
    return {
       choice: 'yes',
       .....
    }
},
methods: {
    clickHere() {
        window.location.href('/register/')
    }
 ........

Can anyone help me troubleshoot this issue?

javascriptvue.jsradio-buttonvue-component

Answer №1

A known issue has been identified in Chrome, which has been reported here. Although the bug is still unresolved, there is a workaround available specifically for Chrome users.
To address the pageshow event specifically for Chrome browsers.

if (navigator.userAgent.indexOf('Chrome/') > 0) {
  window.addEventListener('pageshow', () => {
    new Vue({
      render: (h) => h(App),
    }).$mount('#app');
  });
} else {
  document.addEventListener('DOMContentLoaded', () => {
    new Vue({
      render: (h) => h(App),
    }).$mount('#app');
  });
}

You can find the suggested workaround here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Pagination: An issue arises when deleting records from the first page, as the following page's records are not automatically refilling the first page

I have implemented angular pagination to display records. Each record has a button labeled 'Assign to me'. Clicking on this button removes the selected record from the list. However, I am facing an issue where I display 10 records per page and if ...

javascriptangularjspagination

By pressing enter, Combobox autocomplete feature automatically selects the first item in the suggestion list

I have successfully implemented a jQuery combobox autocomplete feature, similar to the one on the demo below. jQuery combobox autocomplete Is there a way to configure the jQuery combobox autocomplete to automatically select the top suggestion when the ...

javascriptjqueryjquery-ui

having difficulty sending a successful request with angular and spring

When attempting to work with web services in Spring REST with Angular, I am facing challenges executing any actions on it. Below is my code snippet: @RestController @RequestMapping("/rest/cart") public class CartRestController { @RequestMapping(va ...

javascriptjqueryangularjsajaxspring-mvc

Geochart functionality experiencing difficulties within the Vue-chartkick npm package

After installing the chartkick package from "https://www.npmjs.com/package/vue-chartkick" and importing it into the main.ts file, I encountered an issue when including the following html snippet inside my component. The error "No charting library found f ...

vue.jschartkick

Using Ember.js to make a REST API request

Looking for guidance on how to integrate a REST API (providing JSON data) into Ember templates (hbs). I have a service hosted on Apache Tomcat and I'm struggling to utilize its response in Ember JS. Despite trying various approaches found online, I ha ...

javascriptresttomcatember.jsember-data

Sending a notification alert directly to the client's web browser

My goal is to develop an application that allows Super users to notify other users by providing access to content, such as a PDF file, when they click on a link. For example, in the scenario where a teacher wants to share a PDF with students, this applica ...

phpjavascriptjqueryajaxcakephp

Tips for postponing a function's execution in order to ensure it has completely loaded

I am facing an issue with a dynamic page that is populated by an ajax call. Here is the current code snippet: function loadPage() { var container = document.querySelector(".container"); var xhr = new XMLHttpRequest(); xhr.open('GET ...

javascriptajax

Stop the occurrence of numerous ajax requests being triggered by clicking

Having an issue with handling multiple ajax requests. In my scenario, there is a form with a button that triggers a service upon clicking it. This service is responsible for loading a list of items into a table, but currently it only loads one item at a ti ...

javascriptajaxangularjsq

Tips on moving a square along the z axis in three.js

Can anyone provide assistance with translating a square on the z axis in three.js? I would appreciate any examples or guidance on the best approach to achieve this. ...

javascripthtmltransformthree.jswebgl

What is a more efficient method for verifying the value of an object within an array that is nested within another object in JavaScript?

Is there a more efficient way to check for an object in an array based on a property, without having to go through multiple checks and avoiding potential errors with the ? operator? /** * An API returns a job object like: * { id: 123, name: 'The Job ...

javascript

Issue with the loading order of jQuery in Internet Explorer 9

My webpage heavily relies on jQuery for its functionality. While it works perfectly on most browsers, I am encountering issues specifically with IE9 due to the slow loading of JavaScript. The main problem lies in IE9 mistakenly thinking that JavaScript is ...

javascriptjqueryinternet-explorer-9

Issue with CKEditor5 Link popup not displaying in both Bootstrap 5 modal and RSuite library modal in React

React: How to troubleshoot CKEditor5 Link popup not appearing in a modal using either Bootstrap 5 or rsuite library? Seeking advice on resolving this issue. Your help is appreciated! ...

javascriptreactjsbootstrap-5

Stop ckeditor from triggering set callback when the text is modified by an external source

Currently, I am developing a Vue project that involves the use of ckeditor5 as a text editor. Pusher, a real-time API utilizing websockets, is used to broadcast events to other Pusher instances in real time. Learn more about Pusher here. Within the ckedit ...

javascriptvue.jsckeditorpusherckeditor5

Nested attributes added through the nested_form gem causing issues with the Bootsy editor

I have been utilizing the nested_form gem to handle associated entities within my form. Additionally, I am incorporating a wysiwyg editor through the usage of bootsy. However, I have encountered an issue where the nested attributes lack a wysiwyg field fun ...

javascriptruby-on-railsrubyrubygemsnested-forms

Encountering a Javascript 404 error while attempting to make an API call

I encountered an issue while trying to modify data in my database. When my api request is made, I am receiving the following error: Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Additionally, I am r ...

javascriptnode.jsknex.js

Unable to trigger window.open function or it is not being invoked

I am facing an issue with a button on my form that generates PDF files and saves them to the local machine. I want to be able to not only save the files locally but also have them available for download in the browser, especially when there are multiple fi ...

javascriptphpcodeigniter

"Encountered an error message: Unable to retrieve property 'getCapabilities' due to a TypeError

Everything was going smoothly with my tests until I encountered an issue when the browser.getCapabilities(); method was called in the OnComplete function, resulting in an error. //The HTMLReport is triggered once all tests are completed onComplete: f ...

javascriptseleniumjasmineprotractor

Putting off the execution of a setTimeout()

I'm encountering difficulties with a piece of asynchronous JavaScript code designed to fetch values from a database using ajax. The objective is to reload a page once a list has been populated. To achieve this, I attempted to embed the following code ...

javascriptajaxhtml

I am having trouble getting Mongoose to perform operations on my data

After running the code and initiating the trade offer (receiving item, fetching data, then taking action with my app), I encounter an error. emitter.on('depositImportedToDb', function(createNewDeposit) { var roundCode; var roundItems; ...

javascriptnode.jsmongodbmongoose

How can I turn off pop-up notifications?

Would it be feasible to close a popup when clicking anywhere on the window using just pure Javascript? function popItUp() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } The CSS for the popup is as ...

javascripthtmlcss