Utilize elements within a for loop to iteratively access distinct anchors

Currently, I am working on integrating a blog feature into my Vue project.

<li v-for='blog in blogs' :key="blog.id">
     <a>{{ blog.name }}</a>
</li>

I'm looking for a way to add a unique anchor link (to each blog page) for every item in the current loop iteration.

Initially, I attempted to include another v-for on the <a> tag that would iterate over links. However, this resulted in rendering blog.name multiplied by the total elements of each array.

Hopefully, there is a more efficient way to achieve this using loops to avoid manually typing it out like this:

<a href="https://www.google.com"><li>{{ blogs[0].name }}</li></a>
<a href="https://www.youtube.com"><li>{{ blogs[1].name }}</li></a>
<a href="https://www.etc.com"><li>{{ blogs[2].name }}</li></a>

Answer №1

It seems like what you're looking for is correctly structured data within your component's data or props.

You could try using a format similar to this:

blogs: [
  { title: '...', link: '...' },
  { title: '...', link: '...' }
]

Then, you can easily loop through the data using v-for:

<li v-for='blog in blogs' :key="blog.title">
     <a :href="blog.link">{{ blog.title }}</a>
</li>

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 could be causing Vue Router to only load after I click a link and then refresh the entire webpage?

I have a file called components.js filled with Vue.component instances. Then I have a main.js where I implement a router using these components to create different pages. In index.html, I have links to the router pages. The issue is that on the initial ...

transform constant values into API requests using React

The sample dataset mentioned will be retrieved from a backend API call handled by Flask. The API has already been configured on the backend. const rows = [ { name: "XYZ", age: "12", email: "<a href="/cdn-cgi/l/emai ...

Combining axios with `nuxt/content` within a component's `fetch` method is a powerful way to fetch data efficiently

Currently, I am in the process of building a static site using @nuxt/content and my goal is to develop components that can be utilized within the markdown files. One particular component I am working on requires calling an external API to fetch data that w ...

Tips for employing the slice approach in a data-table utilizing Vue

I have a unique situation in my Vue app where I'm utilizing v-data table. The current display of data in the table works fine, but I now want to enhance it by incorporating the slice method. Here is the current data displayed in the table: https://i ...

Searching for the most recent selected element from a multiple select tag in jQuery

Incorporating a <select multiple="multiple" id="multi"> on my website, I've implemented a jQuery script with the following function: $("#multi").on("change", function(){}) My goal is to retrieve the most recently selected item from the select ...

Selecting Laravel lists by month option

I'm encountering a problem here. The error message reads "Too few arguments to function App\Http\Controllers\ViewsController::OBviews(), 0 passed and exactly 1 expected" Here is my controller: public function OBviews($date) { ...

How to Send Hidden Input Element Values to Controller?

On my ASP.NET MVC page, I have multiple hidden input elements that store integer values. They can be found using the selector $('table#ratings input[name=newReviewRatings]'). I'm wondering if it's feasible to use $.post() to send the i ...

Create specification for the properties of the child component

I am interested in working with the props of a parent element's children and validating those props. Can I achieve this using prop-types? export default function MyComponent(props) { return ( <div> {React.Children.map(props.chil ...

Create a collection of data by retrieving values from a web service response

My goal is to populate table values from a webservice response. The issue arises when the response format is not compatible with the table. The response structure may vary. 0:{name: "image.png", base64: "iVBORw"} 1:{name: "download.png", base64: "iVBO"} 2 ...

How come the function String(value).replace(/[^0-9.-]/g, '') is effective?

I recently came across a function in a library that uses String(value).replace(/[^0-9.-]/g, '') to filter out illegal characters and return the legal number. I'm having trouble understanding how this works and what exactly gets replaced. At ...

Difficulty with local storage overwriting

I've been developing a quiz app using only JavaScript. The app allows users to choose a username, answer questions to increase their score, and saves the data in variables. When the game ends, a message is displayed along with the top 5 scores achieve ...

Using Angular JS to toggle ng-show based on controller variable set from a directive

Looking for help updating a controller variable from a directive to then display the new value using ng-show. Take a look at my implementation below: Controller: self.menuVisible = false; Directive: icon.bind('click', function(){ ...

Inertia: Refresh the page with new data without altering the current scroll position

In my application using Inertia/Laravel/VueJs, I have a page displaying numerous posts where each post can be marked as completed. Upon marking a post as completed on the front-end, a CSS class should toggle to indicate completion. The desired behavior is ...

Strategies for managing callback responses within Ejs

I'm facing a challenge in my Node.js application where I need to execute an async function within Ejs code and display the result. Here's what I've attempted: <ul> <% setTimeout(function () { %> <% supplies = [1, 2, 3, 4]; %& ...

The jQuery .find() method was not able to locate a valid

When implementing Bootstrap 4 nav tabs on my page, I encountered a situation where some tabs have embedded YouTube players. To address this issue, I created a function to detect when a tab is clicked and stop the video playback if the previous tab had a pl ...

Is a streamlined jQuery version of the Slider control designed specifically for mobile devices on the horizon?

Currently, I am developing a mobile web app and would like to incorporate the JQuery Slider control. http://docs.jquery.com/UI/Slider However, in order to do so, it seems that the entire JQuery core (29kb compressed & gzipped) is needed. My question ...

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

Ensuring promise doesn't resolve until the IF STATEMENT is executed

I am encountering an issue with the "checkWorkflow" function where it seems to be executing the "If" statement before actually checking. This deduction is based on the output in my console, which makes me believe there might be a problem with how I am hand ...

Next.js encounters an error when importing web3

Currently, I am utilizing next js and material ui to create a demo dapp for educational purposes. With metamask installed, I have successfully implemented a "connect to wallet" button. My issue arises when attempting to import the Web3 constructor. This i ...

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...