Динамически отслеживаемые props

134
06 декабря 2019, 02:10

Предположим, есть нечто такое:

<div class="parent">
  <my-component :data="someData"/>
</div>

MyComponent:

<div :class="{'super-class': someData}"></div>

В родителе выглядит так:

data() {
  return {
    condition: false
  }
},
computed() {
  someData() {
    return condition === true ? true : false;
  }
}

В my-component так:

props: ['data'],
Other not important logic...

Вопрос, собственно, в том, что в родителе в какой-то момент компьютед свойство someData становится true, и надо бы, чтобы это событие влияло на дочерний компонент, но, почему-то, не влияет. Есть мысли, как можно починить?

Answer 1

computed свойства также отлично работают и в дочернем компоненте, посмотрите мой пример:

Vue.component('child',{ 
  props: { 
    data: { 
      type: Boolean 
    } 
  }, 
  template: `<div :class="{'super-class': data}">Text</div>` 
}); 
 
new Vue({ 
  el: '#app', 
  data() { 
    return { 
      condition: false 
    } 
  }, 
  computed: { 
    someData() { 
      return this.condition; 
    } 
  }, 
  mounted() { 
    setInterval(() => { 
      this.condition = !this.condition; 
    }, 1000); 
  } 
})
.super-class { 
  font-size: 25px 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app" class="parent"> 
  <child :data="someData"/> 
</div>

READ ALSO
Вопрос по jquery
javascript

Вопрос по jquery

кто может подсказать? Есть два скрипта в одно из них touch swipe не работает но работает управление по Click, когда пытаюсь подключить сторонний скрипт...

 107
Unexpected token ) на chrome 49, а на 72 все ок
javascript

Unexpected token ) на chrome 49, а на 72 все ок

Использую Хром на ХР 49 версии и при загрузке страницы выпадает alert(Unexpected token ) )На версии 72 все отлично работает

 134
Условные операторы в javascript
javascript

Условные операторы в javascript

Изучаю JS, наткнулся в книге на такой код:

 133
Установка парсера через Yarn
javascript

Установка парсера через Yarn

Существует парсер, который устанавливается через пакетный менеджер yarnУстановка длится второй день

 115