javascript - VueJS 中的计算属性在输入失去焦点之前不会更新

Question

与标题相同。来自对象的计算属性，直到输入框失去焦点才 react 。

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

我使用以下示例创建了一个代码笔: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 中，我正在设置 compulatedMatch..这是正确的方法吗？？

Answer 1

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

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

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