I am struggling to connect the props with data within Vuetify components

I'm having trouble binding data with props in my Vuetify components. I attempted using v-skeleton-loader and v-list, but it doesn't seem to be working. Any ideas on what might be causing this issue?

Below is the code snippet:

<v-list
      style="max-height: 275px"
      class="overflow-y-auto"
      dense
      :disabled="loading"
    >
      <v-list-item-group v-model="x" color="primary">
        <v-list-item v-for="(knittingtype, i) in knittingTypes" :key="i">
          <v-list-item-content>
            <v-skeleton-loader ref="skeleton" type="list-item" loading>
              <v-list-item-title v-text="knittingtype.name"></v-list-item-title
            ></v-skeleton-loader>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
</v-list>
export default {
  data: () => ({
    x : null, 
    loading: true,
  }),
}

Answer №1

The connection with the v-list is accurate, you may have simply forgotten to update the loading variable! Regarding the <v-skeleton-loader>, it's unclear what your intention was, but using

<v-skeleton-loader loading></v-skeleton-loader>
is equivalent to
<v-skeleton-loader loading="true"></v-skeleton-loader>
. If you want to also link this to the 'loading' variable, follow the same approach as for the v-list: :loading="loading"

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

Issue with function not getting triggered upon ng-click event binding

Having trouble getting a button to call the getFilteredRows() function in my MVC app's view and controller. I've tried various combinations, but the button just won't trigger the function. Can anyone help me figure out why? @using ProjectEx ...

Converting "require" to ES6 "import/export" syntax for Node modules

Looking to utilize the pokedex-promise for a pokemonapi, however, the documentation only provides examples on how to require it in vanilla JavaScript: npm install pokedex-promise-v2 --save var Pokedex = require('pokedex-promise-v2'); var P = new ...

Record errors occurring on the client side and send them to the server

Similar Question: Logging Client-Side JavaScript Errors on the Server Is there a way to track client-side JavaScript errors and send them to the server? I am specifically using jQuery and MVC for my project. ...

Having trouble with Passport.js authentication not functioning properly

Setting up passport for the first time and opting for a single Google sign-in option. I've gone through the process of registering with Google APIs to get everything set up. However, when my app calls '/auth/google/', it fails without any re ...

Warning: The file or directory 'C:UsersNuwanstpackage.json' does not exist

Can someone help me with installing socket.io in my project located in the 3.chat folder? I'm encountering some warnings when running the command and it's not creating a node_modules directory. Any suggestions on how to resolve this? C:\Use ...

triggered when utilizing a launch.json `node` command with a Node.js version that differs during compilation

I am experiencing an issue with my code in test.js: const { createCanvas, loadImage } = require('canvas'); console.log('hi'); launch.json ... { "name": "test script", "type": "node&q ...

Replicating JQuery/JavaScript functionalities

I'm facing a challenge with a jQuery/Javascript function that creates an array to populate a hidden field in a nested form. In order to fill the hidden field for all children, I need to call this function multiple times with different child IDs each t ...

Issue: 040A1079 - Failure in RSA Padding Check with PKCS1 OAEP MGF1 Decoding Error Detected on Amazon Web Services

Utilizing the crypto package, I execute the following tasks: Using crypto.generateKeyPairSync() to create publicKey and privateKey The keys are generated only once and stored in the .env file Applying crypto.publicEncrypt() to encrypt data before savin ...

Utilizing JavaScript to call functions from an ASP.NET code file

I am in need of assistance with integrating a JavaScript-based timeline that requires data from an SQL server. I have already developed the queries and JSON conversions using C#.NET functions within a code file associated with an .aspx page. As a newcomer ...

What is the best method to access $(this) within a jQuery load callback function?

We have a piece of code that loads HTML into a div with the class "content". Within this div, there is an element with the class "link" which contains data-href and other data-* properties. The code snippet is as follows: $(document).on('click', ...

What is the best way to use a JavaScript function as a callback?

I'm struggling with understanding callbacks, especially how they function. Here is my function: function checkDuplicateIndex(values, callback) { $.ajax({ type: "POST", url: url, data: "command=checkIndexAlbumTracks& ...

Is there a different approach in Three.js for adjusting the size of a 3D object upon clicking, apart from using the scale.set method?

Hello everyone, I'm excited to ask my first question on StackOverflow! I'm currently developing a javascript interactive game and I'm trying to make a mango in the game change its size, color, etc. every time a certain event occurs. I' ...

Is my HTML <h1> text not updating properly? I'm wondering if I linked app.js correctly

I'm currently learning the basics on a new machine and facing an issue where I am unable to modify the text within the header. It appears that the app.js file might not be properly connected to my index.html file. Within the app.js file, I have the f ...

"Transforming a list retrieved from Django context into a JavaScript or Vue.js list: A step-by-step guide

Having a basic list presented in the django context. rlinks: ['test1', 'test2'', 'test3'] var v_root = new Vue({ delimiters: [ '[[', ']]' ], el: '#vue-main', data: { job ...

Using link interpolation with Vue.js in a v-for loop

I couldn't locate the necessary information in the Vue documentation. How can I pass data to {Icon} using Vue.js? <div class="weekfor"> <h1>{{display(City)}}</h1> <div v-for="item of cast" :key=" ...

Using JavaScript to Filter JSON Objects

After making a php ajax call, I have received the following JSON data that needs to be displayed to the users: JSON {"headers":{},"body":"{\"comuni\":[{\"datapresub\":\"08\/08 ...

The seamless operation of WordPress is disrupted upon the installation of a custom plugin

After creating a Vue plugin for WordPress, I encountered an issue where the plugin appears fine but when trying to add a new page, it displays a blank page. Disabling the plugin resolves the issue. Below is the code used for enqueuing the plugin: <?php ...

Using Ajax, the script triggers calls upon detecting keyup events on various input fields, each

I'm encountering issues while attempting to solve this logic puzzle. The page contains multiple fields and the goal is to store the input values in the database when the user finishes typing. Here's the code snippet: var debounce = null; ...

Expanding content based on height using React

I have successfully implemented the show more/show less feature. However, my issue is that I would like it to be based on the number of lines or screen height rather than the number of characters. This is because the current setup may look awkward on certa ...

Sending "item" properties to the "Route" element

I am looking for a way to dynamically pass a list of route objects as props for the Route components in my AppRouter component. Currently, I have the routes defined like this: export const routes = [ { path: '/about', element: About, exact: tru ...