I'm attempting to create a Mixin that will help me calculate the offsetWidth of an element.
Here is my Mixin:
export const boxWidth = (selector) => ({
mounted() {
selector.addEventListener(
'resize',
this.setBoxWidth
);
},
methods: {
setBoxWidth(e) {
let box = e.target;
this.myBoxWidth = box.offsetWidth;
console.log(this.myBoxWidth);
}
}
})
I am trying to use this Mixin in a component:
<template>
<div
ref="visuraBox"
class="container"
>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input
class="input"
type="text"
placeholder="e.g Alex Smith"
>
</div>
</div>
<div class="field ">
<label class="label">Name</label>
<div class="control">
<input
class="input"
type="text"
placeholder="e.g Alex Smith"
>
</div>
</div>
</div>
</template>
<script>
import { boxWidth } from '../mixins/boxWidth'
export default {
name: 'VisuraCatForm',
mixins: [boxWidth(this.$refs.visuraBox)],
data() {
return {
myBoxWidth: 0
}
},
created() {
const myBox = this.$refs.visuraBox
this.myBoxWidth = myBox.offsetWidth;
}
}
</script>
<style lang='scss' scoped>
@import '@/assets/design/components/_form.scss';
</style>
However, since the ref doesn't exist yet, I'm left wondering: How can I pass a selector inside a mixin? (P.S. I'd rather not declare the mixin globally)