即使數據發生變化，DOM 也不會在 vue.js 中更新

Question

即使數據正確更改，更改也不會反映在 DOM 中。 這是一個非常基本的示例來演示該問題-

<template>
  <input type="text" v-model="username" />
  <p>{{error}}</p>
  <button @click="saveData">Save</button>
</template>

<script>
  export default {
    data () {
      model.error = ''; // adding a new property
      return model; // 'model' is a global variable
    }
    methods: {
      saveData() {
        if (!this.username) {
          this.error = 'Please enter the username!';
          return;
        }
        // ... other code
      }
    }
  };
</script>

調用saveData()后，如果未填寫用戶名，則error變量包含消息。 但它沒有出現在段落中。

有個竅門。 如果在更改error變量時我還更改了username屬性，則會反映更改。

Answer 1

您需要返回錯誤，否則 Vue 無權訪問它。

data () {
  return {
    error: '',
    model: model,
  };
}

Answer 2

只要在model上為data定義error和username屬性，您應該能夠實現您想要做的事情。 我在下面包含了一個簡單的片段，表明它可以正常工作。 查看文檔中的Declaring Reactive Properties 。

 var model = { username: "Default" }; new Vue({ el: "#app", data: () => { model.error = model.error || ""; return model; }, methods: { updateError() { this.error = "Test"; }, updateUsername() { this.username = "Hello, World;"; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="updateError">Update Error</button> <button type="button" @click="updateUsername">Update Username</button> <div>Error: {{error}}</div> <div>UserName: {{username}}</div> </div>