When working with Vue, setting the default value for props as a computed property is an

Question

When working with Vue, setting the default value for props as a computed property is an

  props: {
    rules: {
        type: Array,
        required: false,
        default: () => [
            (file) => !file
                || file.size < 10000000
                || this.getJsonDataByLocale.less_than_10mb_message,
            (file) => !file
                || ACCEPTED_FILE_TYPES.includes(file.type)
                || this.getJsonDataByLocale.wrong_file_message,
        ],
    }
}

This component is designed to have generic functionality. I am attempting to set the rules default value to a computed property named 'this.getJsonDataByLocale'. This computed property serves as a getter.

However, there seems to be an issue with Vue's lifecycle rendering process, where props are rendered before computed properties are resolved. As a result, the component does not have access to fetch data from the computed property.

I require using 'this.getJsonDataByLocale' because the error message needs to be dynamically generated based on its value.

Does anyone have any advice or suggestions on how to resolve this situation?

javascript vue.js

Answer 1

Answer №1

In accordance with Vue's official documentation,

It is important to note that props undergo validation before a component instance is generated, which means that instance properties such as data and computed are not accessible within default or validator functions. source

Therefore, it seems that accessing computed properties within props is not possible.

Answer 2

In accordance with Vue's official documentation,

It is important to note that props undergo validation before a component instance is generated, which means that instance properties such as data and computed are not accessible within default or validator functions. source

Therefore, it seems that accessing computed properties within props is not possible.

Answer 3

Answer №2

It has been mentioned by others that using computed values in your props is not possible. However, have you considered flipping the scenario and utilizing the prop within a computed property? You could achieve this by implementing something along these lines:

props: {
    rules: {
        type: Array,
        required: false,
        default: () => []
    }
},
computed: {
    errorMsg() {
        if (!this.rules.length) { // If no data in rules prop, use default
            return [
                (file) => !file || file.size < 10000000 || this.getJsonDataByLocale.less_than_10mb_message,
                (file) => !file || ACCEPTED_FILE_TYPES.includes(file.type) || this.getJsonDataByLocale.wrong_file_message,
            ]
        }
        // If there is data in rules prop, use that instead
        return this.rules;
    }
}

Answer 4

It has been mentioned by others that using computed values in your props is not possible. However, have you considered flipping the scenario and utilizing the prop within a computed property? You could achieve this by implementing something along these lines:

props: {
    rules: {
        type: Array,
        required: false,
        default: () => []
    }
},
computed: {
    errorMsg() {
        if (!this.rules.length) { // If no data in rules prop, use default
            return [
                (file) => !file || file.size < 10000000 || this.getJsonDataByLocale.less_than_10mb_message,
                (file) => !file || ACCEPTED_FILE_TYPES.includes(file.type) || this.getJsonDataByLocale.wrong_file_message,
            ]
        }
        // If there is data in rules prop, use that instead
        return this.rules;
    }
}

When working with Vue, setting the default value for props as a computed property is an

Answer №1

Answer №2

Similar questions

The attempt to access a Spring Boot webservice using AngularJS and the GET method resulted in a 500 status error, indicating that the operation

Vue CLI's build process encounters issues specifically related to Bootstrap Vue Next

Is there a way to display a foundation.css drop-down menu using jQuery?

Tips for integrating and utilizing the MSAL (Microsoft Authentication Library for JavaScript) effectively in a TypeScript-based React single page application

Add several converted links as variables in each section

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

Traversing an object with a loop

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

Event cancellation received from IncomingMessage

Choosing items by pressing "shift + up arrow"

What is the best way to create a flexible Ul-LI menu?

Implementing universal styles to injected HTML (v-html)

What is the best method to find a matching property in one array from another?

The controller method appears to be unable to detect any parameters

Having trouble viewing the header in devtools for $http requests?

The initial render of children elements in React Google Maps Api may not display properly

Event not tracking properly due to missing label in GA event firing

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

In order to manage this specific file type, you may require a suitable loader. React in conjunction with Material UI could be the

What is the most efficient method for executing over 1,000 queries on MongoDB using nodejs?