javascript - Vue 回调更新数据但 3rd 方组件无法重新渲染

Question

Vue Date Dropdown的值应在conditions更改时更新。目前，watch成功更新selectedDate但无法重新渲染date-dropdown。

<template>
  <div id="app">
      <div>{{selectedDate}}</div> <-- this value is updated after getFilter()
      <date-dropdown default="1995-01-10" v-model="selectedDate"/> <-- this component holds old/default value: 1995-01-10
      <b-button @click="getFilter()" variant="primary">update</b-button>
  </div>
</template>

<script>
    import axios from 'axios';
    import DateDropdown from "vue-date-dropdown";
    const SERVER_URL = 'http://localhost:9000';
  const instance = axios.create({
      baseURL: SERVER_URL,
      timeout: 1000
  });

  export default {
    name: 'App',
    components: {
        DateDropdown
    },
    props: {
    },
    data () {
      return {
        selectedDate: '',
        filter: {
          name: 'Filter22With2Conditions',
          conditions: [
              { type: 'date', clause: 'until', data: '02.02.1990' },
          ]
        }
...
    watch: {
      filter: function () {
          this.selectedDate = this.filter.conditions[0].data;
      }
    },

    methods: {
        getFilter: function() {
            let self = this;
            instance.get('/api/filters?name=Filter22With2Conditions')
                .then(function(response) {
                    console.log('getFilter:response: ' + JSON.stringify(response.data))
                    self.filter = response.data;
                })
                .catch(function(error) {
                    console.log('getFilter: error: '  + error)
                    self.errors.push(error);
                })
        },
...
}

标签： javascriptvue.jsaxios