In my comment system project using Vue.js, I have over 300 comments to manage. Each comment has an admin section that appears when the cursor hovers over it.
Duplicating the admin section component for each comment is not ideal as it creates unnecessary load on mobile devices and computers due to the excessive number of components.
Is there a way to optimize this by sharing the same admin section component across all comments, instead of duplicating it for each individual one?
There isn't a known method to move the common component around the page freely. Typically, this is achieved in the jQuery realm, but it often leads to messy and difficult-to-troubleshoot code.
@Nils suggested using v-if in the comments section, which prevents the floating component from being rendered in the DOM. This means that it won't add weight to the page, resulting in a perceived faster experience for users.
In theory, Vue.js should handle rendering thousands of rows without any issues. More information can be found at Stefan Krause's blog:
In the example below, the "Do something" button only appears in the DOM when the cursor is placed inside one of the comment fields. Until then, it remains unrendered.
Vue.component('comment-block', {
props: ["comment"],
template: `
<div class="comment" @mouseenter="displayOptions=true" @mouseleave="displayOptions=false">
<div class="author">{{comment.author}} wrote:</div>
<input type='text' v-model='comment.message'/>
<div class="options" v-if="displayOptions"><button>Do something</button></div>
</div>`,
data: function(){
return {
displayOptions: false
}
}
});
new Vue({
el: '#app',
data: {
comments: [
{id: 0, author: 'Bob', message: "This is my comment #1"},
{id: 1, author: 'Frank', message: "Comment #2"},
{id: 2, author: 'Joe', message: "One more comment in this page (#3)"}
]
}
});body {
margin: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.comment {
padding: 5px;
}
.comment .author {
display: inline-block;
width: 120px;
text-align: right;
}
.comment input {
display: inline-block;
width: 240px;
}
.comment .options {
display: inline-block;
}<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afd9dacaef9d819e819a">[email protected]</a>/dist/vue.js"></script>
<body>
<div id="app">
<p>List of comments:</p>
<comment-block :comment="comment" v-for="comment in comments"></comment-block>
</div>
</body>Note: The "Do something" button currently has no functionality besides displaying on the screen in this example.
This approach helps maintain a lightweight interface. However, as mentioned in the performance analysis blog post referenced earlier, this micro-optimization typically doesn't have a significant impact unless specific issues arise.
I am looking to replace the symbols < and > within the text. I have constructed a regular expression as follows: (<span[^>]+class\s*=\s*("|')subValue\2[^>]*>)[^<]*(<\/span>)|(<br(\/*)>) This ...
I've been working with the react markdown library and wanted to share my code: import Markdown from 'react-markdown'; import PreClass from './PreClass'; type MarkdownFormatTextProps = { markdown: string; tagName?: string; ...
Currently, I am utilizing ngFileUpload to transmit images to the Cloudinary service. My application is constructed on Ionic and is meant to be functional on both iOS and Android platforms. The code snippet below showcases my image uploading process: .se ...
I'm currently utilizing a combination of material UI table and react-table. When the number of rows in the table exceeds around 200, the performance dips. To address this issue, I am looking to display a fixed number of rows (let's say 20 rows) i ...
I'm currently facing an issue with this function I have. function customCheck(username){ var result = "normal"; $.getJSON('https://api.twitch.tv/kraken/streams/' + username, function(data){ if(data.stream == null) re ...
Recently, I developed an Angular material module similar to a core module. import { NgModule} from '@angular import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ imports: [ MatCheckboxModule ], exports: [ ...
I need help with a jQuery code that will pull up/slide up an Html "p" tag when my page finishes loading. This snippet of jQuery code seems to be working fine: $(function () { $('.graybgc').slideUp(0); }); This is the HTML structure: <p ...
Looking to develop a Vue application with the feature of adding to desktop, similar to the option near the share button on YouTube. Any suggestions on how to achieve this? https://i.stack.imgur.com/nXG4i.png ...
I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...
Currently, I am struggling with writing a constraint code to handle situations where a user tries to search for an id that does not exist in the database (specifically PostgreSQL). Despite my efforts, the if statement in the code below does not seem to be ...
I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...
I am working with a textarea that has the id #list : $text = $('#list').val(); The goal is to split this text into pieces and place each piece as a new item in an array. This array will then be sent to PHP, where I can utilize it in a foreach l ...
When updating state within a useEffect hook while using async/await syntax, I encountered an error regarding the cleanup function. I'm unsure how to properly utilize the cleanup function in this scenario. Error: Warning - A React state update was att ...
While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...
In my experience with Angular, I have utilized Observables in the state layer to manage and distribute app data across different components. I believed that by using observables, the data would automatically update in the template whenever it changed, elim ...
I've been working on some form validation functions and here's what I've come up with: <script> $(document).ready(function() { var dataObject = {}; $('#username').keyup(function () { id = $(this).attr('id'); ...
One issue I am facing is with a javasript function that needs to change the value of an element appended after the document has loaded. The problem arises when trying to intercept actions on a newly appended DIV, such as: <div class="new-div"></d ...
My attempt to smoothly move a box from one position to another using Linear Interpolation is not working as expected. The box just moves without any easing effect. I came across a post on Stack Overflow titled C# Lerping from position to position, but I ma ...
One of the tasks I'm working on involves a collection of audio files. When a file from this list is clicked, I want JavaScript to load and display the waveform of that specific audio file. The following function is responsible for drawing the wavefor ...
I've recently delved into learning Gatsby, and I've encountered an issue with the Open Graph tag in my project. The og:image is displaying a different image than the intended thumbnail for the article. Here's an example article - . When try ...