Vuejs為什么不注冊啟用或禁用我的按鈕？

Question

我正在構建一個簡單的Vuejs網站，您可以在其中編寫有關會議的注釋。 加載后，它將從服務器獲取會議記錄並顯示它們。 用戶隨后寫東西時，他可以單擊“保存”按鈕，這會將文本保存到服務器。 將注釋保存到服務器后，需要禁用“保存”按鈕，並顯示“已保存”文本。 然后，當用戶再次開始寫文本時，應再次啟用該按鈕並再次顯示“保存”。 我會說這是一個非常基本的功能，但是我遇到了麻煩。

這是我的文本區域和保存按鈕：

<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},
},

創建后，我從服務器獲取會議記錄：

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可以將屬性正確綁定到每個實例。

另外， selectedMeeting的content屬性在初始渲染中不存在，因此Vue尚未在該屬性上添加適當的“包裝器”以使事物知道它已更新。

Vue.set ，這可以通過Vue.set完成

接下來，我建議您使用async/await來實現您的諾言，因為這樣可以使遵循起來更加容易。

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

對於您的方法，我還將編寫為async / await。 您也可以像單擊once一樣使用Vue修飾符，以僅在沒有先前請求的情況下才調用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函數中返回對象，並且它沒有以反應方式綁定屬性。

展望未來，您將希望對觸發api調用的文本輸入進行debounce ，並限制這些調用。

Answer 2

this.meetingSaved = true;

this是引用axios對象。 在調用之外引用vue對象，然后使用它。 當您使用jQuery.ajax()時， jQuery.ajax()發生同樣的情況。

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