I am attempting to assign a class using the following syntax:
:class="{active: favs.medium_title.fontWeight === 'bold'}"However, the fontWeight attribute is not yet defined when the component loads.
This is an excerpt from my object:
favs: {
...
medium_title: {},
...
}
When I later add the fontWeight property and give it a value, the active class is not applied as expected.
If you want the new property to be reactive and detect changes, consider using vm.$set. You can find more information about this in the official documentation.
this.$set( this.favs.medium_title , 'fontWeight' , 'bold' )
By doing this, any changes made will be properly detected by Vue.js.
In order to ensure that the fontWeight property is present when the component is mounted, be sure to include it in your data object with a default value.
Without declaring the property fontWeight, it will not be reactive. To make it reactive, you need to declare it in the object declaration.
The class binds properly when the value in the property changes upon button click.
<div id="app">
<p :class="{active: favs.medium_title.fontWeight === 'bold'}">{{ message }}</p>
<button @click="favs.medium_title.fontWeight = 'bold'">
Click here
</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
favs: {
medium_title: {
fontWeight:''
},
}
}
})
For the solution, please refer to the fiddle provided below. https://jsfiddle.net/xgh63uLo/
If you prefer not to declare the property beforehand, you can use Vue.$set to create a new reactive property. Check out the link below for more information: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
I need to create a table in JavaScript. In one of my JS files, I have a controller with JSON data containing properties like width, height, color, etc. In another JS file, I am building the actual table structure. Here is an example of my AngularJS file: ...
Currently, I am utilizing $.post to retrieve results from a database. The syntax I am using is as follows: $.post('addbundle_summary', {id:id}, function(resultsummary) { alert(resultsummary[0]); }) In CodeIgniter, within my model, I am retu ...
Currently, I have a node script dedicated to scraping information from various websites. As I aim to optimize the efficiency of this script, I am faced with the challenge that Node.js operates on a single-threaded runtime by default. However, behind the sc ...
Looking to enhance my web app with a mixin that shows a list of entries, each with a time stamp indicating how long ago it was posted. mixin listTitles(titles) each title in titles article.leaf article a.headline(href=title.URL)= title.t ...
When I click an a tag in React, it doesn't take me to the specified href. Instead, it removes all parameters in the URL after the "?". For example, if I'm on http://localhost:6006/iframe.html?selectedKind=Survey&selectedStory=...etc, clicking ...
When it comes to communication between components, my structure looks something like this: <div id=chat-box> <div class="wrapper"> <div> <chat-header></chat-header> <message-container :chat="chat"></message ...
Currently, I am attempting to incorporate C3JS into my VUEJS/WebPack project (based on the boilerplate found here). D3JS is successfully loaded by npm installing it and including it as a webpack plugin. However, the same approach does not seem to work for ...
Looking to remove a specific URL parameter from a given URL. For instance, if the URL is: http://example.com?foo=bar&baz=boo And I want to eliminate foo=bar to get: http://example.com?baz=boo Or removing baz=boo would leave me with: http://exampl ...
I am new to working with React and I am still struggling to understand state mutation. After reading multiple posts on this topic, I am finding it difficult to grasp the concept of state mutation. So, I have decided to seek clarification on this matter. ...
I am facing a frustrating performance issue. Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculate ...
HTML <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> CSS Properties of box1, box2 and box3 are: box1 { position: absolute; z-index: 100; background-color: rgba(39, 39, 39, 0.3) ...
Is there a way for me to automatically calculate the price and display it as soon as I enter a number into my form? Currently, the price is only displayed after I press submit. <script type="text/javascript"> function calculatePrice() { ...
I have the following code in Vue.js and I am trying to upload a file, but my issue is that I want to save the filename of the uploaded file to the JSON API using a POST method. Is there a way to achieve this? Thank you in advance. <div class="input-f ...
I have encountered a problem with my code - it works fine in Chrome but not in IE or Firefox. I've tried using return false; and event.preventDefault() but they don't seem to be effective in Firefox. The issue arises when the button grabs informa ...
Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...
I seem to be facing a recurring issue while running unit/integration tests for my Angular project using Karma. The tests have a 50:50 success/failure rate, working fine on my machine but failing consistently on our build server, making the process quite un ...
I have generated 3 different plan options from an array of objects retrieved from the backend. Depending on whether the plan is cheaper, the user's subscription, the corresponding button will display "downgrade", more expensive, the button will show ...
I am working on creating a dynamic class that can adapt its argument properties based on a certain value. To illustrate this concept, let's consider a simple example: Imagine I have a class called Customizer, and depending on the value of the mode pr ...
I have two objects named original and custom. My goal is to merge the content from custom into original, but only update the keys in original that are also present in the custom object. Here is an example scenario: var original = { coupon: { ...
I have a dynamic form that I'm trying to submit to my Controller. Instead of sending just a string or an array with data, I need to pass an array of objects using ajax request after building the Javascript Array. The challenge is that when I send only ...