VueJS 中的计算道具在输入失去焦点之前不会更新

Question

同题。从对象计算的属性在输入框失去焦点之前它不会反应。

但是如果对象在数据中，输入中的值一改变就会改变。

我用示例创建了一个代码笔：https://codepen.io/Albvadi/pen/QWwMOQV

<div id="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Match Component</div>

        <div class="card-body">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-4 text-right">{{homeTeam.desc}}</div>
              <div class="col-2">
                <input class="form-control text-center" type="number" min="0" v-model.number="homeTeam.score" />
              </div>
              <div class="col-2">
                <input class="form-control text-center" type="number" min="0" v-model.number="awayTeam.score" />
              </div>
              <div class="col-4">{{ awayTeam.desc }}</div>
              <div class="row">
                <div class="col">
                  DATA:
                  <b>{{ homeTeam.score }}</b>
                </div>
                <div class="row">
                  <div class="col">
                    COMPUTED:
                    <b>{{ awayTeam.score }}</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: "#container",
  data: {
    homeTeam: {
      name: "SPA",
      desc: "Spain",
      score: 0
    }
  },
  computed: {
    awayTeam: function() {
      return {
        name: "GER",
        desc: "Germany",
        score: 0
      };
    },
  },
  mounted() {
    console.log("Component mounted.");
  }
});

如果您更改第一个输入，则数据值会立即更改。如果您更改第二个输入，则计算值仅在输入失去焦点时才更改。

我该如何解决这个问题？

== 编辑 ==

感谢您的回答！我知道将 awayteam 放在数据部分可以解决问题，这只是一个简化问题的示例。

我的问题是，除了这两个结果，我还想计算属性以便能够发布到另一个组件。我用最终结果编辑了 codepen：https://codepen.io/Albvadi/pen/jOELYwN 并且它工作正常。

但是@Sami Kuhmonen 评论说计算属性只是读取属性但是在我的 checkFinalResult 中我设置了 computedMatch.. 这是正确的方法吗？？

Answer 1

在你的情况下，为什么这个计算的属性不会立即更新 DOM 元素，因为它没有 data 与 Vue instance.Here 的引用，它 return 只是一些 static 值，这不是 computed 属性的目的。 computed property 达到目的，当您需要根据 data property 的 vue 实例计算或计算某些决定时。

new Vue({
  el: "#container",
  data: {
    homeTeam: {
      name: "SPA",
      desc: "Spain",
      score: 0
    },
    awayTeam: {
      name: "GER",
      desc: "Spain",
      score: 0
    },
  },
  mounted() {
    console.log("Component mounted.");
  }
});

<div id="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Match Component</div>

        <div class="card-body">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-4 text-right">{{homeTeam.desc}}</div>
              <div class="col-2">
                <input class="form-control text-center" type="number" min="0" v-model.number="homeTeam.score" />
              </div>
              <div class="col-2">
                <input class="form-control text-center" type="number" min="0" v-model.number="awayTeam.score" />
              </div>
              <div class="col-4">{{ awayTeam.desc }}</div>
              <div class="row">
                <div class="col">
                  DATA:
                  <b>{{ homeTeam.score }}</b>
                </div>
                <div class="row">
                  <div class="col">
                    COMPUTED:
                    <b>{{ awayTeam.score }}</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

为什么要为这个任务使用计算属性？我会简单地这样做。

  new Vue({
     el: "#container",
     data: {
        homeTeam: {
        name: "SPA",
       desc: "Spain",
       score: 0
     },
    awayTeam:  {
       name: "GER",
       desc: "Germany",
       score: 0
     },
   },
   mounted() {
      console.log("Component mounted.");
   }
 });

Answer 3

计算属性应被视为只读。每次它们引用的属性发生变化时，它们的值都是根据其他值计算的，并且所有更改都将丢失（或者至少应该这样认为，在某些情况下可能会保留一些值）。尽管有时更改它们的属性似乎有效，但这并不能保证它们可能会随时更改。

在 codepen 中，您已经计算出属性从对象中引用其他属性，因此您必须添加所有您想要类似更改的内容，然后更改该值。这将导致重新评估计算值，并且更改将可见并持久化。

请注意，从许多单独的事物构建计算对象可能不是最高效的方法，这取决于应如何处理它的情况。如果这些值仅在组件内使用，那么直接使用它们很容易，但如果您需要一个特定形式的对象并需要它响应，那么计算属性可能是可行的方法。

VueJS 中的计算道具在输入失去焦点之前不会更新

Computed prop in VueJS not updated until input lost focus

javascript

computed-properties

vuejs2

vue-reactivity