Error: VueJS mixins do not include the property definition

I've been trying to incorporate Mixins into my Vue.js code, but I've run into a few issues :/

Here's the current code for two test modules :

ErrorBaseMixin.vue

<script>
    import ErrorAlert from './ErrorAlert';

    export const ErrorBaseMixin = {
        data() {
            return {
                // Errors management
                error_display: true,
                error_data: {
                    level: "warning",
                    time: 0,

                    status: 200,
                    message: ""
                }
            }
        },
        methods: {
            // ------------------------------------------------------------------------
            // Errors management functions
            // ------------------------------------------------------------------------
            error_function_show_error: function() {
                try {
                    this.$refs.error_component.launch();
                }
                catch {}
            },

            callback_error_catched: function(e) {
                if(e.message === 'Network Error'){
                    this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                    this.error_data.level = "danger";
                }
                else {
                    this.error_data.message = "An error occured : " + e.message;
                    this.error_data.level = "warning";
                }

                this.error_function_show_error();
            },
        },
        components: {
            ErrorAlert
        }
    }

    export default ErrorBaseMixin;
</script>

Test.vue

<template>
        <ErrorAlert
            :error_display="error_display"
            :error="error_data"
            ref="error_component"
        />
    </div>
</template>

<script lang="js">
    import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.vue';

    export default {
        mixins: [ErrorBaseMixin],
        name: 'Test_elt',
        created() {
            this.REST_ADDR = "test/test";
        },
        data() {
            return {
                field: {
                    id: '55',
                    name: 'test'
                }
            }
        },
        methods: {

        }
    }
</script>

However, when I compile the last module, I encounter these errors in my browser console :

[Vue warn]: Property or method "error_data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Strange thing is, everything seems to be working as expected. So I'm puzzled as to why these errors are showing up.

Answer №1

To update, you need to rename ErrorBaseMixin.vue file to ErrorBaseMixin.js:

import ErrorAlert from './ErrorAlert';

const ErrorBaseMixin = {
    data() {
        return {
            // Errors management
            error_display: true,
            error_data: {
                level: "warning",
                time: 0,

                status: 200,
                message: ""
            }
        }
    },
    methods: {
        // ------------------------------------------------------------------------
        // Errors handling functions
        // ------------------------------------------------------------------------
        error_function_show_error: function() {
            try {
                this.$refs.error_component.launch();
            }
            catch {}
        },

        callback_error_catched: function(e) {
            if(e.message === 'Network Error'){
                this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                this.error_data.level = "danger";
            }
            else {
                this.error_data.message = "An error occured : " + e.message;
                this.error_data.level = "warning";
            }

            this.error_function_show_error();
        },
    },
    components: {
        ErrorAlert
    }
}

export default ErrorBaseMixin;

After that, import it in your component:

import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.js';
export default {
    mixins: [ErrorBaseMixin],
...

Note: Be cautious with how you import and export, the method has been modified.

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

Successive, Interrelated Delayed Invocations

There are two functions in my code, getStudentById(studentId) and getBookTitleById(bookId), which retrieve data through ajax calls. My ultimate goal is to use Deferreds in the following sequence: Retrieve the Student object, Then fetch the Book Title bas ...

Caution: It is essential for each child within a list to possess a distinct "key" property - React Native issue alert

Hello everyone, I am currently working on building a list in an app using react-native. I have been following a tutorial video and my code is identical to the instructor's, but I keep encountering an error that says each child in the list needs a key ...

Using jQuery to add emoticons to a div element

I am currently developing a small chat application and I would like to incorporate emojis into it. My goal is to allow users to click on an emoji, which will then appear in the text area where they type their message. When a user clicks on "select," I want ...

Utilize the split() function to break down a string into separate

I'm facing an issue with splitting a string into an array using a regex that doesn't seem to be working properly. Here is my code: <script type="text/javascript"> function GetURLParameter(sParam) { var sPageURL = window.l ...

Retrieving data via AJAX from an SD card

I am using the Atmel SAM4E-EK microcontroller as a server to host a webpage and send data over HTTP protocol. I am currently facing an issue with the download function while trying to download a file from my sd_card, which will not be larger than 512MB. s ...

Building a 'Export to CSV' button using a PHP array within the Wordpress Admin interface

I have successfully populated a PHP multi-dimensional array using a custom function and now I want to enable my admin users to download the data. After researching, I came across a PHP function that can export an array to CSV file. I integrated this funct ...

Struggling to Parse JSON Responses?

Utilizing AJAX/JQuery to communicate with a WCF service presents its own set of challenges. One common method is implementing .NET try/catch error-handling on the service-side to manage different scenarios, such as user timeout errors. Typically, the servi ...

Learn the process of adding a key and value into an array using Angular

I need to filter data based on the number of rows and columns provided by the user. After reading an excel file, I extract the data in the controller: These are the column headers retrieved after the user entered 5 as the input columns: Here is the row ...

Having trouble running Vue component tests with Vitest

I need help with my project setup which includes: Using Vue 3 Webpack as the development server Vitest and Vue Test Utils for testing utilities While I can write and run tests for simple JavaScript functions without issues, I encounter an error when tryi ...

Exploring the Intersection of jQuery and Rails in Dynamic Form Development

I am currently working on an interactive form for a Rails project and need some assistance with listing multiple jQuery functions in the same file. Whenever I try to add a second set of code language, it seems to break the entire file. Below is the Rails ...

"Patience is key when it comes to waiting for an HTTP response

Looking for a solution in AngularJS, I have a service that calls the backend to get some data. Here is how the service looks: app.factory('myService', ['$http', '$window', '$rootScope', function ($http, $window, $ro ...

Unable to get ng-submit function to work properly within the Laravel PHP framework

Hello everyone, I have an inquiry regarding Laravel/AngularJS. In my project, there is a form where users can post questions. However, when I click the submit button, no requests are sent (as per inspection in Google Chrome). Interestingly, the Log in int ...

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

Combine two scope arrays in AngularJS

Is there a way to merge two arrays of scope in AngularJS within my controller so that I can display them in a single table? The merging would be based on a common field present in both arrays, similar to an SQL join operation where data from both tables ...

Error: Jest and Vue3 are unable to find the definition for ShadowRoot

I've been working on setting up Vue3 and Unit Test with Jest. It's been a struggle to get it functioning, and I've tried numerous configurations already. After trying many setups, this is the latest configuration that seems to be "working, ...

I am encountering an issue with this code. The objective is to determine the frequency at which a specific word appears in the provided paragraph

function processWords(){ text = document.getElementById("inputText").value; text = text.replace(/(^\s*)|(\s*$)/gi,""); text = text.replace(/[ ]{2,}/gi," "); text = text.replace(/\n /,"&bso ...

The Workbox cache is not employed by the <img /> tag

Initial Setup "workbox-cdn": "^5.1.4", "nuxt": "^2.15.2" Situation Overview In my application, Pictalk, users can save and access pictograms. Each user has a personalized set of pictograms. Currently, the app only ...

In Javascript, merge two arrays together in a specific format

Can we transform two arrays into a specific format so I can create my D3 graph? Here are the two arrays I have: date = ["sept,09 2015","sept, 10 2015","sept, 11 2015"] likes = [2,4,5] I need to convert them to this format: [{ date: '...', lik ...

Obtain the ID of the textarea element when it is clicked

Is there a way to retrieve the id of a textarea that was focused when another element is clicked? I have tried using $(':input:focus').attr('id'), but the textarea quickly loses focus after the click, making it impossible to obtain the ...

Tips for removing markers from personal Google Maps

I am having trouble deleting markers from my Google Maps using my code. The markers array seems to be empty even after adding markers. Can anyone help me troubleshoot this? Thank you! When I use console.log(markers.length) in the removeMarkers() function, ...