When no values are passed to props in Vue.js, set them to empty

So I have a discount interface set up like this:

export interface Discount {
    id: number
    name: string
    type: string
}

In my Vue.js app, I am using it on my prop in the following way:

export default class DiscountsEdit extends Vue {
    @Prop({ default: () => {} }) discount!: Discount;
}

Currently, I am using the Twig template engine and passing an empty discount array into the Vue component. What I want is to automatically have the whole discount object with empty variable values like this:

id: 0
name: ''
type: ''

Is there a way to achieve this automatically on the Vue.js side, or do I have to define these values as empty before sending it to the Vue side?

Answer №1

This is an example of setting the default value for your object prop in TypeScript:

 @Prop({ default: () => ({id:0,name:'',type:''}) }) discount!: Discount;

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

Ways to pass styling properties to a nested component

I am working on a component that includes an input field: <mat-form-field appearance="standard"> <mat-label >{{label}}<span>*</span></mat-label> <input [type]="type" <span matSuffix>{{suffix} ...

What is the best way to detect when a user manually changes a dropdown selection?

Is there a way to detect when a user changes a dropdown option manually, rather than when the page loads and the default value is set? I attempted using e.originalEvent, but it didn't work as expected. $(self.options.selectChange).change(function (e ...

Unit Testing with Jest: Testing the Invocation of a Function within a Nested (Asynchronous) Function

Attempting to create a unit test for a nested function, here is the structure: myFunction.js const anotherFunction = require('./anotherFunction.js') module.exports = (app, io) => { return (req, res) => { const { id, value } = req.q ...

What is the best way to include numerous attributes to an element using JavaScript?

Attributes can be included within a string in the following format: let attr = ' min="0" step="5" max="100" '; or let attr = ' min="2019-12-25T19:30" '; and so on. Is there a function available ...

Harnessing the power of JSON within an HTML document to display dynamic data

Check out the JSON data through this link: The JSON file contains information about the weather. I need assistance with incorporating the data from the provided link into my HTML document as I am new to utilizing JSON for this purpose. <html> < ...

Issue with Vue: After removing an item from a v-for list, there is a remnant

Can you help me solve this issue with my Vue component setup? I have a list of components, each consisting of a preview canvas, a name, and a delete button. These components are stored in Vuex. For example, the list could look like this: | [W] Item 1 ...

What can be done to stop the event handler from executing?

My goal is to verify a user's authentication every time they click on a button. If the user happens to be logged out and tries to click on a button, they should be redirected back to the home page. The issue I'm facing is that the code after the ...

How can I extract the width of an uploaded image and verify it using JavaScript?

Is it possible to retrieve the image width through upload using PHP and then validate it in JavaScript? $_FILES['image'] If the image size is not equal to 560px, can we return false and display an alert message using JavaScript? Also, I am won ...

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

What could be causing the submenus in my intricate menu component to lose focus when input is entered?

I'm currently working on developing a menu using the MUI Menu component. The goal is to have a popup input control (such as Autocomplete, TextField, Select, or a custom form) appear when a menu item is clicked, based on the choice made from the menu. ...

What is the optimal strategy for managing multilingual text in a React website?

As I develop a react website with multiple localizations, I am faced with the question of how to best store UI texts for different languages. Currently, I am contemplating two approaches: One option is to store text directly in the UI code, using an objec ...

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

What is the best way to change the orientation of a vector map?

Is there a straightforward method for rotating a vector-based map on CANVAS in order to integrate it into a browser navigation system? ...

What is the best way to position Scroll near a mat row in Angular?

With over 20 records loaded into an Angular Material table, I am experiencing an issue where clicking on the last row causes the scroll position to jump to the top of the page. I would like the scroll position to be set near the clicked row instead. Is th ...

Node.js: Steps for receiving an ArrayBuffer in a $http request

I made a request using $http.post from Angular.js to Node.js, expecting to receive an ArrayBuffer. Here is the code snippet: $http.post('/api/scholarships/load/uploaded-files', Global.user, {responseType:'arraybuffer'}).success(functi ...

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

"Optimizing Performance: Discovering Effective Data Caching

As a developer, I have created two functions - one called Get to fetch data by id from the database and cache it, and another called POST to update data in the database. However, I am facing an issue where I need to cache after both the get and update oper ...

Managing jquery values with cookies for loading, saving, and resetting

I recently implemented screen adjustments on my website using scrollbars. I utilized this example as a reference. Below is the code snippet... HTML CODE: <h1>Image Editor with CSS Filters and jQuery</h1> <!--Form for collecting image URL ...

Navigate using history.push with user Logout Icon

Currently, I am utilizing a Material UI icon as a logout button in my project. Here is how I have implemented it: function logout(props:any){ localStorage.removeItem("token"); return( <Redirect to="/login" /> ) //props.history.push("/log ...