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是一个数组。

模板中无法识别Vue值

1 个答案: