v-treeview component triggering method execution twice upon input

I'm facing an issue with my Vue component that contains a treeview. Upon selecting a node, the goal is to update an array and display the checkbox as selected. However, I'm encountering a problem where if I select elements from one folder in the tree, then navigate to another folder to select different items, reopening the initial folder results in all previously selected elements being removed.

Below is the snippet of code:

<v-treeview
  :items="patchItemsTreeList"
  v-model="selectedPatchItemUUIDs"
  @input="onChangeOfPatchSelection"
  :name="'patchItemsTree'"
  :open="openParentNode"
  :item-text="'text'"
  :key="fold"
  :open-all="openParentNode.length === 0"
  :selection-type="selectionType"
  selectable
  open-on-click
  dense

@input=onChangeOfPatchSelection

The method seems to be triggering twice, disrupting my logic flow and clearing the selected items from the array unpredictably.

javascriptvue.jstreeviewvuetify.js

Answer №1

Consider switching from @input to either @update:active or @update:open. It seems like using @update:active would be more suitable in your situation.

<v-treeview
  :items="patchItemsTreeList"
  v-model="selectedPatchItemUUIDs"
  @update:active="onChangeOfPatchSelection"
  :name="'patchItemsTree'"
  :open="openParentNode"
  :item-text="'text'"
  :key="fold"
  :open-all="openParentNode.length === 0"
  :selection-type="selectionType"
  selectable
  open-on-click
  dense
/>

By making this change, the emitted data will no longer be an array of selected items, but rather the open items.

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

Importing Angular libraries with the * symbol

One of the key modules in my library is sha256. To import it, I had to use the following syntax: import sha256 from 'sha256'; However, while researching this issue, I came across a question on Stack Overflow titled: Errors when using MomentJS ...

javascriptangulartypescriptnpm

Tips on ensuring data cleanliness in jQuery input fields

Before sending the ajax request, I want to sanitize the form fields for added security. Currently, my Javascript code looks like this: jQuery(document).ready(function($) { $('#login-form').submit(function(e) { e.preventDefault(); // pr ...

javascriptjquerysanitization

Can I safely execute JSON.parse() on the window's location hash?

Is it safe to store JavaScript variables in the URL's hash for web application state restoration through bookmarks? I've been considering using JSON serialization as a method. Storing variables like this: var params = { var1: window.val1, var2: ...

javascriptajaxjson

"Utilizing Jest Globals to Provide an Empty Input for a Function: A Step-by-

I have developed a function that outputs null when the input is empty: const testFunc = (param) => { if (param) { //blabla } return null; }; To verify the return null behavior with an empty param, I want to utilize describe...it...: describe( ...

javascriptreactjsunit-testingjestjs

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

My current code snippet is displayed below. On smaller mobile screens, all 7 tabs are not visible at once and instead appear in two rows which looks messy. I want to modify the display so that only 3 tabs are visible at a time and can be scrolled through. ...

javascripthtmlcssionic-framework

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

javascripttypescripttestingjestjsauth0

The React Stripe API is functioning perfectly on local servers but encountering issues in the live environment

Just when I thought I was almost finished, reality hits me hard! My deadline is right around the corner! I finally got everything working on my local machine with a stripe payment form. However, when I pushed it live, I received an error message from my A ...

javascriptreactjsstripe-payments

"Utilizing Jquery for interactive menu functionality - delivering the requested JSON

I have successfully implemented a dynamic menu using jQuery that parses a JSON response file to create the menu. However, instead of having the menu items link to URLs, I want them to retrieve and parse JSON data from those URLs. Despite my efforts, the me ...

javascriptjqueryhtmljson

The error message "TypeError: defineCall is not a function. require() fails" indicates that

Upon joining a new project, I encountered an issue with the database model built using Sequelize. It seems that I am unable to import more than a few files using sequelize.import before running into a TypeError: defineCall is not a function. The problem ap ...

javascriptnode.jssequelize.js

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

javascripthtmlcssbackgroundfullpage.js

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Is there a way to pass a c struct pointer into javascript using ffi?

I need help passing a pointer to a struct to a method in nodejs using ffi. I am encountering an error where the type of the JavaScript struct I created cannot be determined. How can I resolve this issue? Previously, I was able to successfully implement si ...

javascriptcnode.jsffi

Error: Firebase is not recognized as a valid function

I have been attempting to go through the firebase Node tutorial at this URL: Running my node.js app leads to a crash with a "TypeError: Firebase is not a function" error. Here is an excerpt from my index.js file: var Firebase = require("firebase"); var f ...

javascriptnode.jsfirebase

Utilizing two imports within the map() method

I have been considering the idea of incorporating two imports within map() in my React code. This is how my code looks: {this.state.dataExample.map(item => ( <ItemsSection nameSection={item.name} /> item.dat ...

javascriptarraysjsonreactjsnext.js

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Resetting component state in React Native is essential for maintaining the correct

I need to reset the state of specific states without affecting others. When a button is clicked, the values of present_count, total_count, present, and total should all be restored to their original state (0), while keeping the state of subjects and text u ...

javascriptreactjsreact-nativestatereset

The program successfully executes its function, however, an error message appears stating: "Error: Cannot alter headers after they have already been sent to the client."

During testing the update post feature in my MERN project, I encountered a strange issue. The post would update successfully, but the page would disappear and I would receive the following error message. However, after restarting the server, the updated po ...

javascriptnode.jsexpress

Styler column - Bootstrap-vue - VueJS

The goal is to format the 'from' and 'to' columns in a way that displays their description rather than their code in the table. <b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0"> ...

vue.jsbootstrap-vue

Updating Vue component properties with data obtained from an external source

Vue.component('unique', { template: `some custom html`, data() { { return { uniquedata: 'hello, beginning!' } } }, methods: { retrieveData: function fetchData() { fetch('http://localhos ...

vue.js

Dynamic Path Integration with Vuefire

How can I configure the path for Vuefire as shown below? export default { firebase: { classlist: db.ref('chapter/1'), // I want to get the number from data // E.g: db.ref('chapter/' + this.chapterid), }, data:{ chap ...

firebasefirebase-realtime-databasevue.jsvuejs2vuefire