Vue.js mixin - access data from mixin method

Samuele B. 0
Viewed 21

I have the following Vue mixin in which I want to be able to have some data members and set values for them inside of a mixin method:

export const adComponentMixin = {
    data() {
        return {
            ads1Code: "",
            ads2Code: "",
            ads3Code: "",
            adsMobileCode: "",
        };
    },
    mounted() {
        this.ads1Code = document.getElementById("ads-div-hidden-1")?.innerHTML ?? "";
        this.ads2Code = document.getElementById("ads-div-hidden-2")?.innerHTML ?? "";
        this.ads3Code = document.getElementById("ads-div-hidden-3")?.innerHTML ?? "";
        this.adsMobileCode =
            document.getElementById("ads-div-hidden-mobile")?.innerHTML ?? "";
    },
};

However, when I try to access this.ads1Code inside of the method, I get this error:

Property 'ads1Code' does not exist on type '{ data(): { ad1Code: string; ad2Code: string; ad3Code: string; adMobileCode: string; }; mounted(): void; }'.

How do I manipulate data inside of the mixin from a mixin method?

vue.js
1 Answers

to implement mixins in other components, you need to do as following :

File - adComponentMixin.js

export default {
data() {
    return {
        ads1Code: "",
        ads2Code: "",
        ads3Code: "",
        adsMobileCode: "",
    };
},
mounted() {
    this.ads1Code = document.getElementById("ads-div-hidden-1")?.innerHTML ?? "";
    this.ads2Code = document.getElementById("ads-div-hidden-2")?.innerHTML ?? "";
    this.ads3Code = document.getElementById("ads-div-hidden-3")?.innerHTML ?? "";
    this.adsMobileCode =
        document.getElementById("ads-div-hidden-mobile")?.innerHTML ?? "";
    }

}

File - some-component.vue

<template>
<div>example</div>
</template>
<script>
import adComponentMixin from './adComponentMixin';
export default{
    name:'some-component',
    mixins:[adComponentMixin ]
}
Peleg Haham0
Related