Блог

У меня есть настройка ниже с использованием vue2.0. Вызывается метод something(), который обновляет «место» на родительском элементе. Я хочу, чтобы дочерний элемент следил за изменениями места и при его обновлении реагировал соответствующим образом. Однако метод watch в дочернем элементе никогда не вызывается. Есть идеи, что здесь не так, пожалуйста?

Спасибо,

 // parent
import home from './components/home.vue'

var App = window.App = new Vue({
data: {
  place: '',
},
methods: {
  something: function(event) {
    this.place = 'some new place'
  })
},
components: {
  'home': home,
}
}).$mount('#app')

// child ('./components/home.vue')
export default {
  props: ['place'],
  // need to react here when place changes
  watch: {
    place: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
}
  

Передаете ли вы реквизит place компоненту?

Вот рабочий фрагмент:

 var home = {
  props: ['place'],
  template: '<div>home: {{ place }}</div>',
  watch: {
    place: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
};

var App = new Vue({
  el: '#app',
  components: {
    'home': home
  },
  data: {
    place: 'somewhere'
  },
  methods: {
    something: function(event) {
      this.place = 'some new place'
    }
  }
});  

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="something">set place</button>
  <p>app: {{ place }}</p>
  <home :place="place"></home>
</div>