Блог

У меня есть кнопка, которая запускает функцию startProcess , которая будет генерировать случайное число. Это случайное число будет передано в качестве реквизита Child.vue , который будет использоваться в стиле. Я заглянул на несколько страниц «Как использовать реквизит в стиле в vue». Решение состояло в том , чтобы использовать computed , но, похоже, ничего не работает. Для лучшего понимания, пожалуйста, проверьте код.

P.S. Это упрощенный код. Удалено template, script, style .

Приложение.vue

 lt;button @click="startProcess"gt;Startlt;/buttongt; lt;Child v-if="toggleChild" :top="top" /gt;  data() {  return {  toggleChild: false,  top: 0  } }, methods: {  startProcess() {  this.toggleChild = !this.toggleChild;  this.top = Math.random();  }; }  

Ребенок.ву

 lt;button @click="logTop"gt;Loglt;/buttongt;  props: { top: Number }, computed: {  return {  cssProps() {  "--top": `${this.top}%`;  };  }; };  .foo {  top: var(--top); };  

попробуйте, как в следующем фрагменте:

 Vue.component('Child', {  template: `  lt;div class=""gt;  lt;button @click="logTop" class="foo" :style="cssProps"gt;Loglt;/buttongt;  lt;/divgt;  `,  props: { top: Number, col: String },  methods: {  logTop() {  console.log(this.top)  }  },  computed: {  cssProps() {  return {  '--top': `${this.top}%`,  '--col': this.col  }  }  } })  new Vue({  el: '#demo',  data() {  return {  toggleChild: false,  top: 0,  col: ''  }  },  methods: {  startProcess() {  this.toggleChild = !this.toggleChild;  this.top = Math.random()*100;  this.col = 'red'  }  } })  Vue.config.productionTip = false Vue.config.devtools = false 

 .foo {  position: absolute;  top: var(--top);  background-color: var(--col); }; 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="demo"gt;  lt;button @click="startProcess"gt;Startlt;/buttongt;  lt;Child v-if="toggleChild" :top="top" :col="col" /gt; lt;/divgt;