Having trouble generating a dynamic ref in Vue.js

I am currently working on rendering a list with a sublist nested within it. My goal is to establish a reference to the inner list using a naming convention such as list-{id}. However, I'm encountering difficulties in achieving this desired outcome.

Below is the snippet of code:

<ul class="scrollable-list" ref="getScrollableRef(company.id)">
  <li v-for="operation in getOperations(company.id)">
    {{company.name}}
  </li>
</ul>

Upon inspecting the $refs object:

$vm0.$refs
Object {getScrollableRef(company.id): Array(13)}

It appears that the value is not being evaluated for some reason. Has anyone else encountered this issue?

Edit: I am actively working to resolve this problem on https://github.com/egoist/vue-mugen-scroll/issues/14

javascriptvue.jsvuejs2

Answer №1

It seems that in this scenario, you are explicitly indicating that the ref should be labeled as "getSchoolableRef(componany.id)". This explains why the $refs object includes a property named getScrollableRef(company.id) with an array containing 13 elements.

If you prefer to use the outcome of the getSchoolableRef function as the name for the ref, you have the option to utilize v-bind or the shorthand colon:

<ul class="scrollable-list" :ref="getScrollableRef(company.id)">

As noted, it is important to remember that $refs does not reactively update. Therefore, changing the assigned value after the component has been initialized will not automatically modify the property name within $refs. Nonetheless, you do have the ability to dynamically set the ref's name during component initialization.

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

How to verify that the user is using the most up-to-date version of the application in React Native

Currently, I am focused on the application and have implemented API endpoints that return the latest version along with information on whether the update is mandatory. Within the application flow, a GET request is sent to these API endpoints to check the ...

javascripttypescriptreact-nativeexpo

What is the process for incorporating Express.js variables into SQL queries?

Recently delving into the world of node.js, I've embarked on a journey to create a login and registration system using express.js, vanilla JS, CSS, HTML, and MySql. Within the following code lies the logic for routing and handling HTTP Post requests ...

javascriptmysqlsqlnode.jsexpress

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

What is the best way to store JSON encoded items in an array using square brackets?

Currently, I am utilizing Javascript along with NodeJS to dynamically generate an array of JSON objects. My goal is to store this array of JSON objects in a .json file for future reference. However, when I attempt to save the file, I encounter an issue whe ...

javascriptjson

confrontation arising between two PHP scripts due to conflicting functionalities within the MetaSlider plugin

Seeking assistance with the WordPress plugin metaslider, specifically involving two code snippets. The first one implements the "ken burns effect" while the second disables the "pause on action" feature. Strangely, the "pause on action" seems to interfere ...

javascriptphpwordpress

The v-data-table is unable to fetch the user list information from the API using Axios

How can I solve the issue of displaying "No data available" in the user list data table on my userDirectory page? I have created a userDirectory page with a subheader and a data table from Vuetify, but it seems to have no data available. <template> ...

javascriptvue.jsaxiosvuetify.jsbackend

The Slider component in Material UI's API may not properly render when using decimal numbers as steps or marks in React

I am having trouble creating a Material UI slider in my React application. I can't figure out which property is missing. Below is the code for my React component: import * as React from 'react'; import Slider from '@material-ui/core/S ...

javascriptreactjsslidermaterial-ui

"Implementing a timer feature in a Vuetify stepper component

I recently created a Vue app with a Vuetify stepper. I am trying to modify the steps so that they advance automatically every minute. Below is the code snippet: <template> <v-stepper v-model="e1"> <v-stepper-header> <v-ste ...

vue.jstimervuetify.jsstepper

Preparing the format/serialization of a JQuery JSON array prior to submitting it

Looking at the JSON structure I have: { "firstArrayOfJSON": [ { "something" : "something" }, { "another" : "another" }, { "secondArrayOfJson" : [ ...

javascriptjqueryarraysajaxjson

What is the best way to display a <div> depending on the screen size in React JS using a global variable, without utilizing state management?

I am attempting to display a message based on the screen resolution in ReactJS. I am utilizing a function component and trying to accomplish this without using state, by using a global variable. const isDesktop = window.innerWidth; {isDesktop > 768 ? ...

javascriptreactjs

Nuxt allows you to open a component or page as a modal with its own unique URL, similar to the

I am developing a Nuxt application with a list of properties, and I want to create a functionality where clicking on a property opens the corresponding property page (/properties/_slug.vue) as a modal in front of the current page. dribble.com serves as a ...

vue.jsnuxt.jsvue-router

Assign a unique ID to each Angular Material checkbox

Presently, I am facing an issue: I am required to generate md-checkboxes from a Database. The implementation is successful using ng-repeat. However, I am encountering difficulties in fetching the data from these checkboxes. Each entry in the Database has ...

javascriptangularjsnode.jscheckboxpug

Leveraging Toaster Notifications in AngularJS for Custom Exception Management and Logging

Implemented the use of AngularJS Toaster for effective notification handling. To customize exception handling, set up in index.html as shown below <toaster-container toaster-options="{'time-out': 3000, 'position-class': 'toast ...

javascriptangularjs

What can be used instead of makeStyles in Material UI version 5?

My journey with Material UI version 5 has just begun. In the past, I would utilize makestyles to incorporate my custom theme's styles; however, it appears that this method no longer works in v.5. Instead of relying on {createMuiTheme}, I have shifted ...

javascriptreactjsmaterial-ui

There is an issue with transmitting data from an HTML page to the server and then retrieving data from the server

Upon running this code, I encountered an issue with sending and receiving data. I kindly request assistance in correcting my code. Highlighted below is the server-side code var http = require("http") ; var fs = require("fs") ; http.createServer(function( ...

javascriptnode.jsserverclient

Exploring the nuances in semantics between AJAX and post/get requests

I'm currently trying to grasp the concept of 'AJAX.' I know that it is short for Async JavaScript over XML, although JSON can also be used instead of XML. As far as I understand, AJAX allows for updating only parts of a web page without need ...

javascriptjqueryajax

"Using angularjs's $location.search method results in an empty object being

I am trying to retrieve my URL querystring in AngularJS using the $location service, similar to this example. My URL looks like this - http://someDomain.com/create/index.jsp?queryToken=123abc However, in my directive: vm.queryParam = $location.search(); ...

javascriptangularjsquery-string

Peculiar redirection encountered while handling a form with checkbox option

When I try to submit the form in Chrome, the PHP file does not get called and I am redirected to another HTML page. However, in Firefox, when I select three checkboxes, it redirects me to that same HTML page as in Chrome. I even tried using radio buttons i ...

javascriptphpjqueryhtmlcheckbox

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

Looking for an effective way to upload an image when the type is “file”? The goal here is to send an image from an image tag to the server without converting it into base64 due to size constraints. <form id="form-url"> <image src ...

javascriptjqueryajaxfile-upload

What is the best way to design a grid with various squares in React Native?

Here's the design I aim to achieve: I am looking to implement the above layout in react native and ensure it is responsive on all screen sizes. I attempted using flexbox but couldn't figure out how to make the boxes square shaped. The code provi ...

javascriptreact-nativereact-native-stylesheet