"Passing data from a child component to a parent component using Vue's emit

offspring

template: `
    <li v-for="option in listaOptiuni" :key="option.id">
        <input @change="updateSelectAllToateOptiunile(); sendListaToateOptiunile()" v-model="listaToateOptiunile" :value="option" :id="option" type="checkbox" class="uk-checkbox">
        <label :for="option">{{ option.denumire }}</label>
    </li>
`

data: function() {
    return {
        listaToateOptiunile: []
    }
}

ancestor

<my-component v-model="myList"></my-component>

Is there a way to transfer the content of listaToateOptiunile directly from the offspring component into the v-model myList in the ancestor component?

Answer №1

When triggering the event v-model listens for.

In Vue2, it looks for input:

<input @change="updateSelectAllToateOptiunile(); sendListaToateOptiunile(), $emit('input', listaToateOptiunile)" v-model="listaToateOptiunile" :value="option" :id="option" type="checkbox" class="uk-checkbox">

In Vue 3, it uses update:modelValue:

<input @change="updateSelectAllToateOptiunile(); sendListaToateOptiunile(), $emit('update:modelValue', listaToateOptiunile)" v-model="listaToateOptiunile" :value="option" :id="option" type="checkbox" class="uk-checkbox">

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

JavaScript 'this' pointing to incorrect object

Unfortunately, this doesn't seem to be pointing to the correct object in this scenario. I'm having trouble figuring out how to reference the right one. function myObject() { this.someMethod1 = function() { var elementBtn = document.getEl ...

How can the refresh event be detected within an iframe by the parent document?

Consider this scenario: We are dealing with a file upload page where we aim to avoid reloading the entire page upon completion of the upload process. To achieve this, we have enclosed the form within an iframe. The form within the iframe posts to itself an ...

Selection box and interactive buttons similar to those found in Gmail

Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...

Internet Explorer not triggering jQuery blur() or focusout() events

Having some issues with my form and event handling when the inputs lose focus. The code is working perfectly in every browser except for Internet Explorer. function formstyle() { var focus = 0; //comentario is the ID of the input $("#comenta ...

Running JavaScript in Laravel without explicitly calling it

I am facing a strange issue with my code. I have an input type="button" element along with a JavaScript function in the same page. The goal is to update a table column only when the user presses the button. However, the JavaScript function gets executed ev ...

AngularJs can manipulate the visibility of elements by showing or hiding them based

I wanted to create a simple hover effect where only the child element of each <li> is displayed when I hover over it. Initially, I set up a ng-show value of false for all elements and tried to change it to true on hover. However, this caused all chil ...

How can we convert a mixed-case word into one or more words with initial capital letters?

Is there a way to convert caps and spaces to their normal form? For instance, can the word coreControllerC4a be transformed into Core Controller C4a automatically when a function is triggered? ...

Strategies for managing rate-limited API services in React/Node.js: Handling ReferenceErrors

Hey there! I'm new to the world of React and NodeJS, and right now I'm navigating my way through dealing with a rate-limited API service. My plan is to have NodeJS fetch data from this API every half an hour, then send it to my "/youtube" endpoin ...

Retrieve the Latest Information from the Asp.Table

My table setup is as follows: <asp:Table ID="model" runat='server'> <asp:TableRow> <asp:TableHeaderCell class="col-xs-2"> Name </asp:TableHeaderCell> <asp:TableHeaderCell class="col- ...

Unable to successfully cancel requestAnimationRequest in a React component when using hooks

I'm currently working on a progress bar project where I aim to halt the animation (using cancelAnimationRequest) once it reaches a specific value (10, 100, ... N) and reset it back to 0. Unfortunately, in my existing code, although it resets to 0, th ...

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

Navigational paths for the persistent sidebar in Material UI

I am looking to utilize this as a page navigation, but I am struggling with properly linking it to the index. I have attempted separating the items, but that approach did not work as intended. <List> {['Home' , 'Abo ...

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

Unable to create follow/unfollow feature with jquery ajax

Issue: While the database part for following and unfollowing actions is functioning correctly, there seems to be a problem with the jQuery and Ajax section. The follow button changes to unfollow (with some CSS styling) only after refreshing the page, rathe ...

Troubleshooting V-model errors within VueJS components

Just dipping into VueJS and trying out a chat feature from a tutorial. I noticed the tutorial uses v-model in a component, but when I replicate it, the component doesn't display on the screen and the console throws a "text is not defined" error. Strug ...

"Troubleshooting alert: Encounter an error message saying 'process is not defined' when attempting to load the grpc package using proto-loader and grpc-js within a

Looking for help with integrating a typescript Vue.js component that needs to make a grpc call. The proto file can be found here: https://github.com/floydjones1/ts-node-grpc/blob/main/proto/random.proto Here is the component.vue code snippet: <script ...

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...

Can you explain how this promise functions within the context of the mutation observer, even without an argument?

Recently, I came across a mutation observer in some TypeScript code that has left me puzzled. This particular implementation of a promise within the mutation observer seems unconventional to me: const observer = new MutationObserver((mutations: MutationR ...

Animating a gradient within an SVG element following along an SVG path

I successfully created an SVG egg and animated a path while adding a gradient, but I am facing an issue. The linear gradient goes from top to bottom, but I want the dark color at 0% and the light color at 100%. Essentially, I want the gradient to follow th ...

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

element, it's strange that I am not receiving any error messages. However, despite this, the jquery datepicker function and numeric plugin are not working on the intended input fields they are supposed to be linked to. This particular page is a simpl ...