不响应观察者初始JSON数据调用的最佳实践是什么

时间:2018-08-21 15:44:25

标签: vue.js

我进行了一个简单的axios get调用,以加载外部数据并分配给数据元素。在此步骤中,我们将设置一个表单v模型。同样,当通过观察者进行更改时,我们的v模型将显示模态。 Vuejs中是否有一种方法可以告诉观察者忽略从null到轴后加载的最初的第一次转换?现在,模态将在JSON加载后显示。

<select v-model="selectedSiteReport">
  <option v-for="siteReport in siteReports" :value="siteReport.id">
    {{siteReport.report_name}}
  </option>
</select>
....
data: {
  selectedSiteReport: null, 
  siteReports: null
},
watch: {
  selectedSiteReport: function(){
    alert("selectedSiteReport was changed");
},
mounted: function(){
  var that = this;
  axios.get('/api/v1/site_reports/<%=@site_report.id %>')
    .then(function (response) {
      that.siteReports = response.data.site_reports;
      that.selectedSiteReport = _.filter(that.siteReports, ['is_current', true])[0].id; 

1 个答案:

答案 0 :(得分:1)

从文档中: https://vuejs.org/v2/guide/computed.html#Watchers

watch: {
    // whenever question changes, this function will run
    question: function (newQuestion, oldQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        this.debouncedGetAnswer()
    }
},

**编辑**我是对的。检查oldValue是否为null,什么都不做...或oldValue不为null,执行某些操作...

只需添加一个if以检查旧值是否不等于声明的数据值(在您的情况下为null)

您应该以类似以下内容结束

watch: {
    selectedSiteReport: function(newV, oldV){
        if(oldV != null){
            alert("selectedSiteReport was changed");
        }
    },
}