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.
When the user clicks on the link "출력하기", I want the web page to add a checkbox to all images. I wrote this code, but it's not working. Can anyone help me? This is my JS: $(document).ready(function(){ $("#print").on('click', fu ...
I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...
I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...
My tables have been customized with the following settings: :items-per-page="itemsPerPage" :footer-props="{ 'items-per-page-options': [10, 20, 30, 40, 50, -1] }" The itemsPerPage values are sourced from the user's pr ...
I am testing ajax on a local server, but encountering an issue where the console is showing that send() is being identified as an anonymous function and I am receiving a blank document. The console displays: XHR finished loading: GET "http://localhost/js ...
I currently have an anchor tag on my website that looks like this: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d11131b11101b3e0d11131b09161b0c1b501d1113">[email protected]</a>?subject=Wel ...
In the script below, I have a json object that is being processed: $http({ url: '/mpdValidation/mpdValidate', method: "POST", data: { 'message' : mpdData } ).then(function(response) { console.log(response.data ...
Struggling to display nested object content using v-for. I have a prop containing an object, but the div doesn't show when I use v-if="prop". Any help on how to resolve this issue would be greatly appreciated. Below is the syntax I'm currently us ...
I am currently using a Bootstrap template for my React app. Within the template, there is a JavaScript code that should make the header sticky when scrolling. It functions as expected in pure HTML, but once I move the header to a React template (necessary ...
I am attempting to adjust the positioning of the scrollable list item depending on whether a message was sent by a user or another party. However, my current method is not yielding the desired results. I have experimented with adding .css('position&a ...
We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...
I'm having trouble running a machine learning script from my node.js application using the child-process core module as described here However, I am unable to receive any output from script.stdout.on. The versions I am using are Node v12.5.0 and pyt ...
In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...
Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...
Need help adding a date picker to my code. Below is the snippet of code: The issue I am facing is that I want to prevent users from manually typing in dates. <div class="form-group clearfix"> <label class="col-lg-4 control-label">Date Sold ...
As a newbie in the realm of vue and Laravel Framework, I am eager to fetch data from an API and display it dynamically on my web page. To achieve this, I have already set up a table named 'Progress' where I seeded some initial data. Utilizing AP ...
While attempting to install electron using npm install electron, I encountered the following error: 908 error code 1 909 error path C:\Users\name\Documents\name\Code\code\node_modules\gl 910 error command failed ... ...
I have implemented react-infinite-scroll to display a continuous feed of data. My goal is to refresh the data feed whenever the user makes any changes to their settings. To achieve this, I am utilizing a key prop for the InfiniteScroll component. The conc ...
Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...
Struggling with a common coder's mental block: The idea: Imagine entering a URL like www.mysite.com/getStuff?name=Jerry&occupation=Engineer&Id=12345 Rather than receiving a webpage, the goal is to get back a json object for parsing on anoth ...