javascript - 为什么 Vuejs 不注册启用或禁用我的按钮？

Question

我正在构建一个简单的 Vuejs 网站，您可以在其中编写有关 session 的笔记。加载后，它从服务器获取 session 记录并显示它们。然后当用户写一些东西时，他可以单击“保存”按钮，将文本保存到服务器。当笔记被保存到服务器时，保存按钮需要被禁用并显示一个文本说“已保存”。当用户再次开始写文本时，它应该再次启用该按钮并再次显示“保存”。我会说这是一个非常基本的功能，但我在使用它时遇到了麻烦。

这是我的文本区域和我的保存按钮:

<textarea v-model="selectedMeeting.content" ref="meetingContent"></textarea>
<button v-on:click="saveMeeting" v-bind:disabled="meetingSaved">
    {{ saveMeetingButton.saveText }}
</button>

在我的 Vue 应用程序中，我首先启动我的数据:

data: {
    selectedMeeting: {},
    meetings: [],
    meetingSaved: true,
    saveMeetingButton: {saveText: 'Save Meeting', savedText: 'Saved', disabled: true},
},

创建后，我从服务器获取 session 记录:

created() {
    axios.get('/ajax/meetings')
        .then(response => {
            this.meetings = response.data;
            this.selectedMeeting = this.meetings[0];
            this.meetingSaved = true;
        });
},

我有一个保存笔记的方法:

methods: {
    saveMeeting: function () {
        axios.post('/ajax/meetings/' + this.selectedMeeting.id, this.selectedMeeting)
            .then(function (response) {
                this.selectedMeeting = response.data;
                console.log('Now setting meetingSaved to true');
                this.meetingSaved = true;
                console.log('Done setting meetingSaved to true');
            });
    },
},

我有一个观察者，以防文本发生变化，它会立即保存文本(这会保存我键入的每个字母，我当然需要更改，但这只是开始。

watch: {
    'selectedMeeting.content': function () {
        this.meetingSaved = false;
        console.log('Changed meeting ', new Date());
        this.saveMeeting();
    }
},

如果我现在输入一个字母，我会在日志中得到这个:

Changed meeting  Tue Dec 04 2018 19:14:43 GMT+0100
Now setting meetingSaved to true
Done setting meetingSaved to true

日志符合预期，但按钮本身从未被禁用。但是，如果我删除观察者，该按钮将始终处于禁用状态。即使观察者首先将 this.meetingSaved 设置为 false，然后 this.saveMeeting() 将其设置为 true，以某种方式添加观察者永远不会禁用按钮。

有人知道我在这里做错了什么吗？欢迎所有提示!

[编辑]

这是整个页面的粘贴:https://pastebin.com/x4VZvbr5

Answer 1

你有一些事情需要改变。

首先 data 属性应该是一个返回对象的函数:

data() {
    return {
        selectedMeeting: {
            content: null
        },
        meetings: [],
        meetingSaved: true,
        saveMeetingButton: { 
            saveText: 'Save Meeting',
            savedText: 'Saved',
            disabled: true
        },
    };
}

这样 Vue 就可以将属性正确绑定(bind)到每个实例。

此外，selectedMeeting 的 content 属性在初始渲染中不存在，因此 Vue 没有在该属性上添加适当的“包装器”来让事情知道它更新了。

顺便说一句，这可以通过 Vue.set

来完成

接下来，我建议您使用 async/await 作为您的 promise，因为它更容易遵循。

async created() {
    const response = await axios.get('/ajax/meetings');
    this.meetings = response.data;
    this.selectedMeeting = this.meetings[0];
    this.meetingSaved = true;
},

对于你的方法，我也会写成 async/await。您还可以使用 Vue 修饰符，如点击时 once 仅在没有先前请求的情况下调用 api(想想快速双击)。

methods: {
    async saveMeeting () {
        const response = await axios.post('/ajax/meetings/' + this.selectedMeeting.id, this.selectedMeeting);
        this.selectedMeeting = response.data;
        console.log('Now setting meetingSaved to true');
        this.meetingSaved = true;
        console.log('Done setting meetingSaved to true');
    },
},

其余代码看起来没问题。

总而言之，主要问题是您没有在 data 函数中返回一个对象，并且它没有反应性地绑定(bind)属性。

展望 future ，您将想要去抖动触发 api 调用的文本输入并限制调用。