javascript - Vue JS Ajax 数据未在加载时填充 Vue-Tribute

Question

我正在使用 Vue Tribute 组件 https://github.com/syropian/vue-tribute

当“show”数据属性设置为 true 时最初加载页面时，我得到“No Match!”。但是，如果我在页面加载时将“显示”数据属性设置为 false，然后手动将其设置为 true，我将按预期获得两个结果。我试图将对 getTributeOptions() 的函数调用包装在“安装、创建和更新”中，但我收到了相同的结果。我正在使用 setTimeout() 来模拟我用来加载远程数据的 AJAX 调用。

var app = new Vue({
  el: '#myApp',
  data: function() {
    return {
      show: true,
      tributeOptions: {
        values: []
      }
    };
  },
  mounted: function() {
    this.getTributeOptions();
  },
  methods: {
    getTributeOptions: function(resource) {
      var vm = this;
      setTimeout(function() {
         vm.tributeOptions.values = [
            { key: 'Phil Heartman', value: 'pheartman' },
            { key: 'Gordon Ramsey', value: 'gramsey' }
          ];
      }, 500)
    }
  }
})

<div id="myApp">
  <div v-if="show">
    <vue-tribute :options="tributeOptions">
      <input type="text" placeholder="@" />
    </vue-tribute>
  </div>
</div>

https://codepen.io/anon/pen/QBQaNB?editors=1111

Answer 1

我找到了这个问题的答案:Vuejs mount the child components only after data has been loaded

更新代码:

var app = new Vue({
  el: '#myApp',
  data: function() {
    return {
      userDataLoaded: false,
      tributeOptions: {
        values: []
      }
    };
  },
  mounted: function() {
    this.getTributeOptions();
  },
  methods: {
    getTributeOptions: function(resource) {
      var vm = this;
      setTimeout(function() {
         vm.tributeOptions.values = [
            { key: 'Phil Heartman', value: 'pheartman' },
            { key: 'Gordon Ramsey', value: 'gramsey' }
          ];
        vm.dataLoaded = true;
      }, 500)
    }
  }
})

<div id="myApp">
  <template>
    <template v-if="dataLoaded">
      <vue-tribute :options="tributeOptions">
        <input type="text" placeholder="@" />
      </vue-tribute>
    </template>
  </template>
</div>