爲什麼計算的屬性返回undefined？

注：在程序中使用的數據導致我的麻煩來自外部，所以我很抱歉無法提供一個完整的工作示例。請讓我知道，如果缺少了什麼，我加入我beive的所有信息是相關的理解上下文爲什麼計算的屬性返回undefined？

我Vue的實例有一個computed財產是依賴於一個AJAX調用數據帶來。它所做的就是將這些返回的數據（因爲它）轉換成Vue屬性（下面的allcases），以便在HTML代碼中重用。

從我的Vue實例的computed部分：

computed: { 
     allcases: function() { 
      console.log('getting all cases') 
      var request = $.ajax({ 
        (...) <- a working AJAX call here, please see below 
       }) 
       .done(function(msg) { 
        console.log('found: ' + JSON.stringify(msg.hits.hits)); 
        return msg.hits.hits; 
       }) 
       .fail(function(jqXHR, msg) { 
        console.log('error posting incident: ' + msg); 
       }); 
     } 
    }

當運行這個我在控制檯上看到

found: {"_index":"incidents","_type":"incidents","_id":"AVxeaaE5n3UYRVv5wrrJ","_score":1,"_source":{"time":"2017-05-31T14:09:22+02:00","lastname":"ert","firstname":"ertr"}},{"_index":"incidents","_type":"incidents","_id":"AVxjykjeqc2UmzuwNYsy","_score":1,"_source":{"time":"2017-06-01T15:13:40+02:00","lastname":"hello2","firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjx3TKqc2UmzuwNYsw","_score":1,"_source":{"time":"2017-06-01T15:10:34+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"AVxfOF-sRInTI31ZgCYt","_score":1,"_source":{"time":"2017-06-01T15:12:20+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"new incident","_score":1,"_source":{"time":"2017-06-01T15:12:41+02:00","lastname":"hello1","firstname":"ertert"}},{"_index":"incidents","_type":"incidents","_id":"AVxfN4wIRInTI31ZgCYs","_score":1,"_source":{"time":"2017-05-31T17:54:54+02:00","lastname":null,"firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjol5dRInTI31ZgCmI","_score":1,"_source":{"time":"2017-06-01T14:30:04+02:00","lastname":"hjkj","firstname":"hjkhjk"}},{"_index":"incidents","_type":"incidents","_id":"AVxjyKaFqc2UmzuwNYsx","_score":1,"_source":{"time":"2017-06-01T15:11:53+02:00","lastname":"hello","firstname":"world"}}]

所以return msg.hits.hits前右的msg（和msg.hits.hits）的內容是否正確，內容是我所期望的。

本示例複製the basic one from the documentation。

allcases然而undefined當我運行腳本。

我知道這是因爲

-1-

我看在Vue公司擴展Vue的成分在Chrome

-2-

的HTML文件有以下代碼

<div id="currentcases"> 
    {{allcases}} 
</div>

其中，在開發工具元素觀察時，是空的：

<div id="currentcases"> 

      </div>

我真的不知道什麼是錯的這個代碼。

來源

2017-06-01 WoJ

，因爲它不返回任何東西 – thanksd

@thanksd肯定'computed.allcases'仍然會解析爲函數本身？ –

@thanksd：對不起，我不明白，請您詳細說明一下嗎？ 'msg.hits.hits'是一個數組，這就是返回的結果 – WoJ

你allcases計算屬性爲undefined，因爲該計算屬性的方法未返回值。當您返回done回調中的值時，它不會神奇地返回到您的計算屬性方法的範圍內。

除非您希望每次依賴vue屬性更改時都觸發異步調用，否則我不會將此代碼作爲計算屬性。

我會做allcases一個常規數據屬性最初設置爲null：

data() { 
    return { 
    allcases: null, 
    } 
}

然後，我把你的異步調用一個新的方法（比如fetchAllcases）。在這種方法中，你可以將allcases數據屬性直接設置爲msg.hits.hits在done回調：

methods: { 
    fetchAllcases() { 
    let self = this; 
    console.log('getting all cases') 
    var request = $.ajax({ 
      (...) <- a working AJAX call here, please see below 
     }) 
     .done(function(msg) { 
      console.log('found: ' + JSON.stringify(msg.hits.hits)); 
      self.allcases = msg.hits.hits; 
     }) 
     .fail(function(jqXHR, msg) { 
      console.log('error posting incident: ' + msg); 
     }); 
    } 
}

然後，只需在組件的mounted生命週期掛鉤火一次這個方法：

mounted() { 
    this.fetchAllcases(); 
}

來源

2017-06-01 15:42:14 thanksd

按jQuery docs，呼籲$.ajax回報jqXHR，而這正是你在你的request變量儲蓄，而不是msg.hits.hits

達到什麼你正在嘗試做的，可以考慮使用vue-async-computed

來源

2017-06-01 15:28:45 Faris

他甚至沒有回覆這個承諾。 –

@RoyJ是的，但他將它保存在'request'中，所以我認爲這就是他的消費！ – Faris

但是他並沒有返回'request'變量（反正無道理）。這就是爲什麼計算屬性的值是「未定義」的原因。 – thanksd

爲什麼計算的屬性返回undefined？

回答

相關問題