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

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

javascripthtmljsonnode.js

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

In TypeScript, there is a unique feature available for defining properties with values using the `value` keyword. class Test { constructor(private value: number = 123) { } public MyValueProperty: number = 5; } Here is how you can define such ...

javascripttypescript

Tips for dynamically adding an external SVG animation to your website:

When trying to insert an animated SVG using jQuery or plain JavaScript, they appear static in Chrome and Edge, but display correctly in Firefox: $(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use> ...

javascriptjqueryhtmlsvg

Tips for utilizing multiple checked data bindings with a single radio button in KnockoutJS

Ensure the user selects a single radio button. The label needs to display the value of the selected radio button in a text box and store it in the Ajax "title" variable for backend use (Python - Flask). Clicking the migrate button triggers the Ajax call. ...

javascriptjquerypythonajaxknockout.js

JavaScript: Finding the current month and all subsequent months until the end of the year

Is there a way in vanilla JavaScript to retrieve the current month and the following 12 months? For instance, if today is April 2022, I would like the output to be: April 2022 May 2022 June 2022 July 2022 August 2022 September 2022 October 2022 November 2 ...

javascriptreactjs

Creating an installation package for an Electron application on Windows

Is it possible to create a Mac installer for an Electron app using a Windows PC? I have tried running npm make, but it only generates a Windows installer. ...

javascriptjsongithubelectron

Clicking on a jQuery element will reveal a list of corresponding elements

I've retrieved a list of elements from the database and displayed them in a table with a button: <a href="#" class="hiden"></a> To show and hide advanced information contained within: <div class="object></div> Here is my jQ ...

javascriptjqueryhtmltoggle

What's the best way to prevent Vue from being loaded while working with Elixir?

Currently, in my Laravel 5.3 project, I am utilizing Elixir to compile both my Sass and JS files. Within my /resources/assets/js/app.js file, there are just two lines of code: require('./bootstrap'); require('./search'); The search.j ...

phplaravelvue.jslaravel-5.3

Navigating through nested objects in JSON when working with D3: a guide

Currently, I am in the process of learning D3 using various tutorials. Here is the code snippet I have been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title ...

javascriptjsond3.jsesri

"Utilize the style attribute to modify the appearance based on the

I was the original asker of this question, but I failed to provide a clear description which led to not getting an answer. However, I will now explain everything here. Essentially, I am looking for a JavaScript function that can identify a class with a spe ...

javascriptcssclass

Python Mechanize file uploading capabilities

Hey there! I've been experimenting with mechanize and Python to upload a file to a website. I've had some success so far, but now I'm facing a challenge at the upload page. I understand that mechanize doesn't support JavaScript, but I&a ...

javascriptpythonfileuploadmechanize

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js

"Troubleshooting a Node.js JWT issue in a React.js

I've been diving into backend development and recently created some small APIs. They all function perfectly in Postman, but I encountered an issue when attempting to execute this particular call const onSubmit = async () => { try { setIsL ...

javascriptnode.jsreactjsexpress

an all-encompassing loading animation designed specifically for updates to location.href

We have a situation where a customer's website is displaying extremely slowly within an iFrame, taking about 7 seconds to load. All we can do is provide the customer with a JavaScript file for inclusion on their site, as they are not willing to make a ...

javascriptajaxanimationhookloading

Error encountered while rendering a functional component in ReactJS

Recently, I've been utilizing functional components in my project, like this: const Component = (props) => <div>asdasdasd</div>. However, I'm encountering a cryptic error when trying to render my application. The console displays a ...

javascriptreactjs

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

Currently, I am working on creating a form that allows users to build quizzes without any restrictions on the number of questions they must include. To achieve this, I plan to add an "add question" button at the bottom of the quiz form, allowing users to d ...

javascripthtmlreactjs

What is the best way to incorporate user-provided values into a dynamic URL?

I am trying to create a feature where users can input a value and then click a button that will take them to a URL tailored to their entry. Here is my current code, but I am facing an issue - the user_input data does not seem to be passed to the URL when ...

javascripthtml

Using ElectronJS requires the usage of the import keyword to load ES Modules

I've recently delved into Electron development by exploring the Electron Docs. I opted for ES6 syntax with import/export, while the documentation showcased the use of require. To align with ES Module standards, I updated my package.json file with typ ...

javascriptnode.jsnpmelectron

What steps do I need to take to set up Vue-CLI 3 to generate a webpage with no JavaScript?

My dilemma is this: I have a simple static page that does not require JavaScript. Using vue-cli 3, I am attempting to pass the HTML file through webpack for minification purposes. Unfortunately, it seems that accomplishing this task is not as straightforwa ...

javascriptvue.jswebpackvue-cli-3

Incorporating text sections into a div container and adjusting the width

Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...

javascriptjquerycss