Vue.JS передает вычисленные значения из корневого в дочерний компонент с помощью реквизита

Question

Итак, у меня есть демонстрационное приложение, в котором я генерирую случайное число через вычисляемое свойство в корневом каталоге и передаю это вычисленное значение дочернему компоненту с помощью реквизита.

Я не могу найти правильный способ обновления значения в дочернем компоненте всякий раз, когда я генерирую случайное значение при нажатии.

Кроме того, выбор jquery dom странный, иногда он дает мне неопределенность, а иногда работает и выделяет ячейку.

Вот мой кодовый блок

Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"]
    }
  },
  computed:{
    getValues:function(){ 
      $('.cells').removeClass('highlight');
      $('#cell_'+this.randval).addClass('highlight');
      console.log($('#cell_').text(), this.$refs.cell_1); // for example this return undefined sometime and works other times
      return this.randval;
    }
  } 
});

let app = new Vue({
  el:"#app",
  data:{
    val:0
  },
  methods:{
    randFun:function(){ 
      this.val = parseInt(Math.random()*10);
    }
  },
  computed:{
    watchVal:function(){ 
      return (this.val<9)?this.val:0;
    }  
  }
});

Answer 1

Обновите компонент, как это, и кажется, что это единственный способ обновить реквизиты и посмотреть их -

Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"],
      final:0
    }
  },
  watch: {
    randval:function(){   
      this.final = this.randval;
      console.log('watching randvals-->',this.randval);  
    }
  }, 
});

Answer 2

Вы можете использовать v-bind:class

А также вы можете watch значение реквизита.

computed: {
  getValues:function(){
    // ...
  }
},
watch: {
  randval(newVal, oldVal) {
    console.log('newVal: ', newVal);
    console.log('oldVal: ', oldVal);
  }
}

<li v-for="item, i in items" class="cells"
  :class="{ highlight: (i === randval) }">

Регистрация в Codepen