I have a button that runs the function startProcess
which will generate a random number. This random number will be passed as a prop to Child.vue
that will be used in style. I looked into some pages "How to use props in style in vue". The solution was to use computed
, but nothing seems to work. For a better understanding, please check the code.
P.S. This is a simplified code. Removed template, script, style
.
App.vue
<button @click="startProcess">Start</button>
<Child v-if="toggleChild" :top="top" />
data() {
return {
toggleChild: false,
top: 0
}
},
methods: {
startProcess() {
this.toggleChild = !this.toggleChild;
this.top = Math.random();
};
}
Child.vue
<button @click="logTop">Log</button>
props: { top: Number },
computed: {
return {
cssProps() {
"--top": `${this.top}%`;
};
};
};
.foo {
top: var(--top);
};
from Recent Questions - Stack Overflow https://ift.tt/3Dqmj8X
https://ift.tt/eA8V8J
No comments:
Post a Comment