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

正如标题所说。从一个对象计算出来的属性，直到输入框失去焦点，它才起作用

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

我使用以下示例创建了一个代码笔：

匹配组件
{{homeTeam.desc}}
{{awayTeam.desc}}
数据：
{{homeTeam.score}
计算：
{{awayTeam.score}

如果更改第一个输入，数据值将在中间更改。 如果更改第二个输入，则计算值仅在输入失去焦点时更改

我怎样才能解决这个问题

==编辑==

谢谢你的回答！ 我知道在数据部分放置AwayTam可以解决问题，这只是一个简化我的问题的例子

我的问题是，除了这两个结果之外，我还希望有一个计算属性，以便能够发布到另一个组件。 我编辑了代码笔，最后的结果是：它工作正常

但是@Sami Kuhmonen指出，计算属性仅为读取属性，但在我的

checkFinalResult

中，我正在设置

computedMatch

。。

---

这是正确的方法？？？

在您的例子中，为什么这个计算属性不立即更新

DOM

元素，因为它没有

数据

引用

Vue

实例。在这里，它只返回一些

静态

值，这不是

计算

属性的目的<当您需要根据

vue

实例的

data属性

计算或计算某些决策时，code>computed属性就应运而生了

newvue({
el:“集装箱”，
数据：{
主队：{
名称：“SPA”，
描述：“西班牙”，
分数：0
},
阿瓦泰姆：{
姓名：“GER”，
描述：“西班牙”，
分数：0
},
},
安装的（）{
console.log（“组件安装”）；
}
});

匹配组件
{{homeTeam.desc}}
{{awayTeam.desc}}
数据：
{{homeTeam.score}
计算：
{{awayTeam.score}
为什么要为此任务使用计算属性？我只想这样做

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

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

在代码笔中，您已经有了引用对象中其他属性的计算属性，因此您必须添加所有您希望以类似方式更改的内容，然后更改该值。这将导致重新计算计算的值，并且更改将可见并持久化

请注意，从许多不同的事物构建计算对象可能不是最有效的方法，这取决于应该如何处理它。如果这些值只在组件中使用，那么直接使用它们很容易，但是如果您需要某个特定形式的对象，并且需要它是被动的，那么computed属性可能是一种方法
 不应更改计算值。它们是根据其他数据计算的，因此是只读的。谢谢！您能检查我的编辑吗？您从未在计算属性中设置任何内容。这是正确的方法。所以你还是做错事。如果您确实需要修改计算数据，那么请确保其中的每个字段都引用
数据中的一个字段，然后您可以根据需要修改这些字段。就像你已经对其中一些做了一样。再次感谢你。如果您愿意，将您的评论作为答案发布，我会检查它是否为正确答案。我认为这是对我的问题最有帮助的评论。。。我将尝试重构我的数据，以不在计算属性中设置任何内容。。。再次感谢！谢谢您能检查编辑以推荐最佳方法吗？
  new Vue({
     el: "#container",
     data: {
        homeTeam: {
        name: "SPA",
       desc: "Spain",
       score: 0
     },
    awayTeam:  {
       name: "GER",
       desc: "Germany",
       score: 0
     },
   },
   mounted() {
      console.log("Component mounted.");
   }
 });