Configuring v-model with dynamic attribute in Vue.js

Is it possible to dynamically set up v-model using v-for with dynamic keys? The current code does not seem to update the model as expected.

I am working within the Vuetify framework.

Here is my code snippet:
Template

<v-card v-for="(value, key) in myData">
<v-checkbox v-model='selected[key]' :name="key" ></v-checkbox>
</v-card>

Script

export default {
        props: {
           myData : Object
         },
        data: function(){
            return {
                selected: {},
                active: null,
            }
        },
        methods: {
            setModels: function()
            {
                let data = this.myData;
                let sel = this.selected;
                Object.keys(data).forEach(function(key){
                    if(typeof data[key]== 'object')
                    {
                        sel[key] = []

                    }
                });


            },


        },

        mounted() {
           this.setModels();
        }
    }

Answer №1

To simplify your code, consider defining a method:

methods: {
    checkSelection (id) {
        return this.chosenItems.includes(id);
    }
}

Then, assign v-model="checkSelection(id)" to ensure proper functionality.

Answer №2

attempting:

<v-card v-for="(element, position) in myData">
<v-checkbox v-model="element" :name="position" ></v-checkbox>
</v-card>

What perplexes me is... Why is your myData structured as an object and not an array of objects? If it were an array, you could simplify the code like this:

<v-card v-for="element in myData">
<v-checkbox v-model="element.checked" :name="element.name" ></v-checkbox>
</v-card>

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

What is the best way to provide an accessible title to an SVG icon using a tooltip in MUI?

When a tooltip is used with an icon button, the button automatically takes on the accessibility name of the tooltip title. This setup, as demonstrated in the documentation example, ensures that a screen reader announces it as "Delete, button", which is ben ...

Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course ima ...

Tips for shrinking a sticky header when scrolling using Angular and JavaScript

Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality. How can I adjust the display of the lower half of the header to show no text when the user s ...

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

While working with Next.js, I encountered an issue when trying to upload an image to Firebase storage. Despite my efforts, I encountered just one error along the way. Initialization of Firebase Admin SDK // firebase.js import * as admin from "firebas ...

`How can I enable the download attribute feature on Safari browser?`

Is there a workaround for saving files with a specified name in Safari? The following HTML code does not work properly in Safari, as it saves the file as 'unknown' without an extension name. <a href="data:application/csv;charset=utf-8,Col1%2C ...

Wrap all temporary array elements of the same type within an object

Extracted from a json api, the following snippet of content showcases various titles and content types: contents: [ { title: "some title", content_type: 2 }, { title: "some title", content_type: 2 }, { title: "some title", content_type: 1 }, { title: ...

Trouble embedding iframes in local files?

I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...

Applying binary information to an image

Let's say I have an <img/>. The img is initially set with src='http://somelocation/getmypic'. Later on, there might be a need to change the content of the image based on some ajax call that returns binary data. However, this decision c ...

Creating trails by following the cursor's movement in KineticJS

Currently, I am working on a drawing application using KineticJS. While I have successfully used it to draw shapes and straight lines by following the method outlined in KineticJS - Drawing Lines with Mouse, I now need to draw a line along the mouse's ...

The D3 data format allows for creating interactive sunburst charts that can be easily zoom

My data is structured similarly to flare.json as shown in this example: I'm curious about the function used by the d3 zoomable chart to format the data in this way. The original structure in flare.json looks like this: { name: "stuff", childr ...

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

Exploring Vue 3.3: Understanding Generics and Dynamic Properties

I'm currently diving into the generics feature in vue 3.3 and I've been pondering about defining the type of an incoming prop based on another prop value. This is my current component structure: export interface OptionProps { id: string | numb ...

Chrome now supports clickable circular canvas corners

I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...

Using two variables for iteration in Vue.js v-for loop

Can you create a v-for loop with two variables? I attempted the following, but it did not function as expected <ul id="example-1"> <li v-for="apple in apples" v-for="banana in bananas"> {{ apple .message }} {{ banana .message }} & ...

Can custom directives incorporate comprehension expressions?

Is there a way to implement comprehension expressions similar to those used in ng-options, but for grouping radio buttons or checkboxes? app.js angular .module("app", []) .controller("controller", ["$scope", function($scope){ $scope.selec ...

Spontaneous visual paired with text upon refreshing

I am new to Java script and I am working on creating a web page that displays two random numbers every time it is refreshed. Depending on these numbers, specific text should be shown. These numbers are represented by images ranging from 0 to 5. Currently ...

Generating a dynamic form by utilizing a JavaScript JSON object

I need assistance with creating an html form based on a JSON object’s properties. How can I target multiple levels to generate different fields and also drill down deeper to access field details? I am open to suggestions for alternative formats as well. ...

How to boost the value of a property within a MongoDB document with Mongoose

Recently, I've been dealing with an array of objects named "items". This array includes different objects and I need to search for each object in MongoDB using the "baseId" found in the Base Document. Once I locate the matching object, I aim to update ...

Ways to update the cart page automatically after quantity changes in Shopify

I have made some updates to the Approach and now I am using JavaScript. I've also updated the script and its logic, which is pasted below. Please take a look and see if you can assist me. I am trying to display information on the top of the cart page ...

reloading a URL dynamically using an array in JavaScript

I need assistance with a Chrome extension code. The goal is to have it check the page that initially loads, and if it matches my website st.mywebsite.com, execute the specified code. Currently, it does not perform this check and runs on every loaded page ...