Using Vue.js to dynamically append router links with JavaScript

let link = `<router-link :to="{name : 'profile' , params : { slug : ${response.data.nickname} }}">
<img src="${response.data.avatar}" class="card__image">
</router-link>`;

$('body').append(link)

After rendering in HTML;

<router-link :to="{name : 'profile' , params : { slug : omerf }}">
<img src="http://localhost:8000/storage/default.png" class="card__image">
</router-link>

Is there a way to achieve the following using the append method;

<a href="/profile/omerf">
<img src="http://localhost:8000/storage/default.png" class="card__image">
</a>

Answer №1

It is important to remember that once Vue has rendered, you cannot dynamically add router-link to your HTML. The router-link will only render as a tag when Vue initially loads. Instead of using jQuery to append elements, consider using the v-if directive in your Vue template. By using v-if, the item will only be inserted into the DOM if the specified condition is true. For more information on Vue conditional rendering, you can refer to the following documentation: https://vuejs.org/guide/essentials/conditional.html#v-if

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

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

Angular 6 Calendar Template issues with parsing: Unable to link to 'view' as it is not recognized as a valid property of 'div'

I am in the process of developing an application that utilizes this angular calendar. My tech stack includes Angular 6 with AngularFire2 and Firebase. Below is my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; imp ...

Harness the power of Highcharts through an Ajax request to retrieve a JSON file

I am having an issue using Highcharts with a JSON file from an external server. When I try to bind the returning file to the chart in my ASP.NET MVC application, it doesn't work. Here is the code I have attempted: http://jsfiddle.net/Q6ngj/2/ jQuery ...

Error: Unable to access the 'create' property of an undefined object while utilizing sequelize to register a user and add an entry

Whenever I try to execute this controller, an issue arises indicating a problem with the recognition of the .create method from the model. What is the correct way to import Sequelize in order to utilize it effectively? const db = require("../Models/m_use ...

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

Guide to displaying numerous points on mapbox by utilizing a for each loop statement

I have a 2D array containing longitudes and latitudes that I need to map using MapBox. The example I found only demonstrates plotting two points, so I attempted to use a for-each loop to iterate through my 2D array and plot all the points. However, I enco ...

Unraveling the mysteries of this PHP-generated object

Need help with iterating over a JSON object generated by PHP code in response to a web service request. Looking for guidance on rendering sub-objects in a select list, especially those with value indexes. Can someone provide assistance on populating a sel ...

Session data in ExpressJS is not being stored in the cookie

There are plenty of questions on this topic, but unfortunately, I haven't found any answers that solve my issue. I'm using Chrome with ExpressJS and VueJs 3 to build a simple application where users can "login" and access another page. All I wan ...

Correlating Mailgun Webhook event with Mailing list email

Recently, I have started using the Mailgun API to send emails and have also begun utilizing their mailing list feature. When sending to a mailing list, such as [email protected], I receive a single message ID. However, when receiving webhook responses, t ...

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Upon submitting a form, it should trigger the onSubmit method function. However, an error is being returned instead: TypeError: "t.onSubmit is not a function". I've attempted to address this issue by researching similar problems and solutions provide ...

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

What is the necessity of using declare in TypeScript for declaring variables and functions, and when is it not required? For instance, why use declare var foo: number; when let foo: number; seems to achieve the same result (declaring a variable named ...

Running JavaScript in selenium and obtaining the result

I'm currently utilizing JavaScript with Selenium WebDriver. Here is a snippet of my code: let return_value = driver.execute_script(script) However, I am unsure how to retrieve the value from my script. const token = await grecaptcha.enterprise.exec ...

Meteor - An error occurred in the Subscription Publish Function because it returned an array of non-Cursors

I'm attempting to publish a collection, but my console is showing that it returns an array. server/publish.js HeartCount = new Mongo.Collection('heartcount'); Meteor.publish("currentHeartCount", function() { return HeartCount.find().f ...

Storing numerous JSON records into an array by parsing them from a file

As a beginner in JS programming, I have a question that may seem trivial. Despite hours of searching online, I haven't been able to find a solution that works for me. I am dealing with multiple JSON feeds where each URL provides a multilayer JSON rec ...

Developing JavaScript objects with functions using JSON

I am looking to create a specific object with the following structure: var myObj={ "rules": { "email": { "required": true, "email": true, "remote": { "url": "check-email.php", ...

encountering difficulty with loading JavaScript code while customizing form fields in Symfony/Sonata Admin

I have been attempting to personalize a field in a form created with the Sonata Admin Bundle. I followed the solution provided in this article: Customize form field rendering. Apart from customizing the form field, I also aimed to implement an autocomple ...

React Sortable JS is causing the bootstrap grid style to disappear

As I work on developing a straightforward React application, my goal is to integrate React Sortable Js into my Bootstrap grid layout. However, when I enclose within <ReactSortable>, the grid layout no longer displays two boxes side by side in two ro ...

Clicking will open the link in both a new tab and the current tab

I'm looking to enable ng click functionality to work in both new tabs and the current tab. The URL is dynamically generated based on a certain condition. Here is the HTML: <a ng-href="{{myPathVariable }} " ng-click=" GoToThemes()" class="shift-l ...

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 ...

Click on the input field to give it focus before adding a class during the page

Alright, so here's the deal - I have an input field with the class .cf-se-input. I want this field to be focused using jQuery as soon as the document is ready. Additionally, if the field is focused either by the user clicking on it or through jQuery f ...