Suppose we have a data variable and I want to utilize this data variable for styling purposes.
data()
{
return{
selected:{
index: 2
}
}
}
<style>
.parent-table >>> .table-row:nth-child(/* here I intend to use selected.index */) {
background: red;
}
</style>
My scenario involves using a table component on my landing page. The goal is to modify the background of the selected row in the table from the landing page.
Unfortunately, there doesn't seem to be a solution that fits your requirements within Vue 2. The good news is that in Vue 3.2, a new feature was introduced that allows for component state-driven dynamic CSS values within <style> tags. You can learn more about this update here.
After carefully analyzing your needs and spending some time researching, I have come up with a JavaScript-based solution since dynamic variables cannot be used in CSS nth-child selectors. For further information, you can refer to this Stack Overflow post:
Is it possible to use CSS vars in CSS3 selectors?It appears that the best approach would be to update the style of the nth-child using pure JS.
Check out this working demo below:
new Vue({
el: '#app',
data: {
selected: {
index: 2
}
},
mounted() {
let listSelector = document.querySelector(`li:nth-child(${this.selected.index})`);
listSelector.style.backgroundColor = 'lightGreen';
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>Fifth list item</li>
</ul>
</div>I'm struggling to find the right words, but here's a guide on passing variables to style scope
PROPS:
props: {
bgColor: {
type: String,
default: "#ff0000" //RED
}
},
COMPUTED (variables that can be used as arguments):
computed: {
tableRowColor() {
return {
'--bg-color': this.bgColor,
'--index': this.selected.index //from your data
}
}
}
Here's an example of how you can access the variables inside style scoped:
<style scoped>
table, td, th {
border: 1px solid;
}
table {
width: 100%;
background: var(--bg-color); /*here is how to access the variable */
}
</style>
note: You don't need to define props if you only need to retrieve the index from your data
Here is a demonstration of passing a data property to a CSS property.
<script>
export default {
data: () => ({
color: 'red',
}),
};
</script>
<style scoped>
.card-text-color {
color: v-bind(color)
}
Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...
I have a strong dislike for having all my configuration files cluttering up the root directory. These files are usually set up at the beginning of a project and rarely need to be changed. While I can hide them in WebStorm, it becomes a hassle to unhide the ...
I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...
For my latest project, I developed a basic todo application using React. One of the key features is that when a user clicks on a checkbox, the corresponding todo item's CSS changes to show a strike-through effect. Additionally, a button appears on hov ...
Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...
Issue with Web API Endpoint not being triggered after deploying solution to IIS server Working endpoint : https://localhost:44335/Api/Course/GetStudents Endpoint not functioning correctly: Ajax Code function GetStudents(IsEdit) { $.ajax({ ...
I've developed a custom KO bindingHandler (view it here) to assist in updating the DataTable. The documentation for JQuery.DataTable.Select regarding how to access data requires a handle. You can see the details here. var table = $('#myTable&a ...
I need assistance with ajax .tabs() and how to clear or remove the contents of unselected tabs. I have already explored the jQuery website for a solution and came across this event, but I am unsure what steps to take next: $( ".selector" ).bind( "tabssele ...
After successfully creating my own tooltips with jQuery and Ajax to pull content from an external file, I encountered a problem. I have a loading.gif animation in the background of the container that I want to remove once the ajax content loads. Can anyone ...
I am experiencing an issue with displaying posted values in a pop-up box. Specifically, when I click on "Book now", it only shows one set of id values for all entries. For example, if I click on the 1st row's "Book now" button, it displays the values ...
When working with JavaScript, I am using JSON.stringify which generates the following string: {"grid":[{"section":[{"id":"wid-id-1-1"},{"id":"wid-id-1-4"}]},{"section":[{"id":"wid-id-1-5"}]},{"section":[{"id":"wid-id-1-2"},{"id":"wid-id-1-3"}]}]} I am ma ...
While working on creating a .pptx file using ASPOSE.Slides, I encountered some issues with embedding fonts. As an alternative option, I am looking for suggestions on how to embed custom fonts in a .pptx file using Apache POI or other methods. If you have ...
My inline TinyMCE form sends content to qry.php with the key "edit_me". I prefer the default behavior of sending content using the name attribute instead. <script type="text/javascript"> tinymce.init({ selector: '#edit_me', ...
After browsing through various resources such as this link, that link, and another one on the PayPal developer website, I attempted to implement a payment processing system that allows users to approve a preset amount of money. Similar to services like Ube ...
My function to sign up a user and redirect them to the main page is implemented like this: onSubmit(){ this.userService.createUser(this.user).subscribe(function (response) { alert('Registration successful'); localStor ...
Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...
I'm attempting to add a clear button for users to reset the values in a dropdown menu. However, when I run the application, I encounter the following error preventing me from selecting an option in the dropdown: Unable to access property 'leng ...
After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...
Looking for ways to extract total calorie and nutrition information from a large document displaying the nutritional data of a simulated recipe. Please review the codesandbox json file first. The objective is to capture the total calories and nutritive c ...
I need to implement the split method on a variable fetched using attr. This is the code snippet I am attempting: $(document).ready(function() { $('.some_divs').each(function() { var id = $(this).attr('id'); var ida = ...