There appears to be an issue with the v-model in the Vuetify v-btn-toggle

I have a situation where I am using two v-btn-toggles with multiple buttons in each. When selecting a button in the first toggle, it should impact which buttons are available in the second toggle based on a specific pattern:

firstButtons: [ "a", "b", "c" ],
secondButtons: { a: [0,1,2], b: [3,4], c: [5] }

The v-btn-toggles must be used in this scenario. When clicking on "C", the button "5" is selected in the second group. However, if we then click on "A", instead of "0" being selected as expected, it ends up being "2". Furthermore, clicking randomly on the first group results in inconsistent selections in the second group.

I am trying to create a data pattern like this, but am encountering issues. Any suggestions on how to achieve this?

Here is a codepen example demonstrating this behavior.

javascriptvue.jsvuejs2vue-componentvuetify.js

Answer №1

It appears that the issue arises due to the way <v-btn-toggle> assigns its v-model based on its child elements and how this interacts with Vue keys.

Upon transitioning topSelection from A to B, there is a momentary switch in bottomSelection to 3, which is unintended.

To resolve this, ensure that the key binding in the second loop corresponds to the index of the v-for:

<v-btn v-for="(button, index) in buttons[topSelection].buttons" :key="index">

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

Is there a problem with this spell checking feature implemented with jQuery?

<script type="text/javascript"> // Validate the spelling in a textarea $("#check-textarea").click(function (e) { e.preventDefault(); $(".loading").show(); $("#text-content") .spellChecke ...

javascriptasp.netjqueryspell-checking

What is the purpose of $ and # in the following code snippet: $('#<%= txtFirstName.ClientID%>')

$('#<%= txtFirstName.ClientID%>').show(); Attempting to pass the ClientId as a parameter from server tags to an external JavaScript file. <input type="text" ID="txtFirstName" runat="server" maxlength="50" class="Def ...

asp.netjavascriptjqueryasp.net-3.5

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

javascriptandroidioshtmlcanvas

dojo combobox with data loaded dynamically from JSON

I am facing an issue with populating a Combobox dynamically using a jsonRest from a cross-origin request. While I have managed to do it statically (if that's the correct term), I am struggling to implement it for multiple cases. This is just a small ...

javascriptjsoncomboboxdojo

Struggling to send an object through a node route for rendering a page?

Currently tackling a node.js project using express.js. I have a route that renders an ejs page and passes along the team object. Strangely, when I try to access <%= team.member.name %>, it returns as undefined despite the information being present. A ...

javascripthtmlnode.jsexpressejs

Avoiding double entries in the shopping list using DOM selectors in JavaScript

I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to acces ...

javascripthtmlcss

Continuously running React useEffect even with an empty dependency array

In my React application, I have implemented a hook system. Each sub-hook that is generated within this main hook is assigned a unique ID automatically. This ID is incremented by 1 every time a new sub-hook is created, ensuring uniqueness. const App = ...

javascriptreactjsreact-hooks

Designing personalized plugins with Typescript in Nuxt

In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...

javascripttypescriptvue.jspluginsnuxt.js

Creating a link button using JavaScript

I have integrated a Setmore code on my website to facilitate appointment booking, which triggers a popup similar to what you would see on a hotel reservation site. <script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe ...

javascripthtmlcss

Is there a way to automatically scroll to the bottom of a div when it first

Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages. Utilizing VueJs: <template> <div id="app"> <div class="comments" ...

csstypescriptvue.jsscroll

Adjusting form elements with Javascript

I'm looking to refresh my knowledge of JS by allowing users to input their first and last names along with two numbers. Upon clicking the button, I want the text to display as, "Hello Name! Your sum is number!" I've encountered an issue in my co ...

javascriptforms

Troubleshooting issues with JavaScript progress bar functionality

I have implemented a progress bar using HTML5, JavaScript and Ajax to showcase file uploads in PHP. The issue I am facing is that the progress bar is not displaying the progress correctly. In addition to that, the echo statements in the PHP code are no ...

javascriptphpajaxhtml

Simple Steps for Making a Get Request using Vuex in Vue.js

I'm trying to figure out how to store products in Vuex within my index component. import Vue from 'vue' import Vuex from 'vuex' import cart from "./modules/cart"; import createPersistedState from "vuex-persistedstate ...

javascriptvue.jsvuejs2vuex

Check if the path meets the criteria to be considered valid JavaScript code

I have a javascript variable containing a path that may point to an image file, like ../app/assets/icon.png. If the path is incorrect or doesn't exist, I need to use a different file from another location. The final code should resemble this: var ver ...

javascriptnode.js

Displaying information before it is fully loaded due to asynchronous calls

Having an issue where data from a JSON file is loading after a function has completed in JavaScript, causing it to not display properly in the browser. I've been researching alternative solutions through this stackoverflow post which offers some worka ...

javascriptjson

Set up a programmatic way to manage errors in Vue using Mocha

In almost all of my unit tests in Mocha, I consistently include the following code snippet at the beginning: it('should do something', (done) => { Vue.config.errorHandler = done; // perform some asynchronous action }); By default, Vue h ...

vue.jsmocha.jsvue-test-utils

Performing a JavaScript Axios POST request following a series of iterations using a while loop with

Just getting started with async/await and feeling a bit lost. I'm trying to figure out how to send an axios post request after a while loop finishes. Is there a way to wrap the while loop in an async function and await for it? Here's the code s ...

javascriptvue.jspromiseasync-awaitaxios

Choosing various data using Ajax

I am currently in the process of extracting various pieces of data from my insert.php page, including the post id, username, and user id. I intend to include other selected data as well. However, when trying to echo out multiple queries, all the informatio ...

phpjavascriptjqueryajax

Retrieve the key values from an object of a generic type

Is there a way to retrieve the keys of the object when it is of type T? I attempted to accomplish this using different methods such as: function getGenericTypeKeys<T>(): string[] { return Object.keys({} as T); } and function getGenericTypeKeys< ...

javascriptnode.jstypescriptgenerics

What is the best way to iterate through data with ajax and mysql?

I have a school project where I need to create an MP3 album playlist using a premade PHP API with JavaScript or jQuery (without using PHP). I can input the data via an AJAX call. The goal is to add multiple songs along with their URLs into a column named s ...

javascriptjqueryajaxapiloops