在 VueJS 中方法完成后渲染表单

Question

我的 VueJS 页面出现问题。这是一个用于网站不同翻译的页面。它在顶部有一个用于语言选择的下拉菜单，一旦切换将使用当前语言更新字段。

加载时问题就开始了，因为我的表单是这样的：

<form id="trForm">
    ...
    <input type="text" name="header_title" class="form-control" v-model="translations.header.header_title" />
    ...
</form>

它试图在方法返回任何数据之前访问这些属性，但是一旦完成它仍然会显示数据，但是当我尝试切换语言时变得很麻烦，它不会因为这个问题和另外，如果我执行以下操作：

<form id="trForm">
    ...
    <input type="text" name="header_title" v-if="translations.header" class="form-control" v-model="translations.header.header_title" />
    ...
</form>

在每个字段上，未填充的字段将根本不显示新输入值的字段。我尝试了类似translations.features || '' 的方法，但没有成功。

我还尝试在父块上设置一个条件，如果加载为假将显示表单，但由于页面先加载而不是方法执行，因此第一微秒始终为假。

methods: {
    fetchTranslations(e) {
        let vm = this;
        vm.loaded = false;
        $.get('/ajax/admin/translations', { 'locale': e }).done((data) => {
            if (data.success) {
                vm.translations = JSON.parse(data.translations.translation);
                vm.loaded = true;
            } else {
                toastr.error('Something went wrong');
            }
        });
    },

请问，我该怎么办？有数据后显示表格就好了。

Answer 1

• 引入一个新变量，例如loaded 默认为 false
• 将此变量用作v-if 条件form
• 在数据获取的回调中，将loaded 设置为true。