在模板中無法識別Vue值

Question

嘗試首次使用Vue，並且在模板中無法識別某些值時出現問題，即使在使用Chrome Vue調試工具進行檢查時設置了這些值。

我在Wordpress上下文中使用內聯模板執行此操作。我在下面的例子中刪除了很多不重要的代碼，只關注加載器。我將加載值設置爲true，在這裏我沒有任何改變。當加載頁面時，我可以簡單地看到微調器，然後消失。但是當我使用調試工具檢查時，loading的值是true。我究竟做錯了什麼？

的Javascript：

(function($) { 

    var employeesListingElement = document.getElementById('vue-employees-listing'); 

    if (employeesListingElement) { 

     var EmployeesListing = new Vue({ 
      el : employeesListingElement, 
      data() { 
       return { 
        employees: [], 
        filter: '', 
        errors: [], 
        loading: true 
       } 
      } 
     }); 

    } 

})(jQuery); 

HTML

<div id="vue-employees-listing"> 
    <div v-if="employees.loading" class="ajax-loader"> 
     <p>Loading</p> 
    </div> 
</div> 

Answer 1

您的模板應該是

<div v-if="loading" class="ajax-loader"> 

employees是一個數組。