如何通过 javascript 变量更新 vuejs 中的数据变量答案

【问题标题】：How to update data's variable in vuejs by a javascript variables如何通过 javascript 变量更新 vuejs 中的数据变量
【发布时间】：2018-07-12 20:54:09
【问题描述】：

这些天我一直在使用 Vuejs，但我遇到了一个我不知道如何解决的问题。这是我的代码：

var vm = new Vue({
  el: '#app',
  apolloProvider,

  data: {
      books: [],
      borrow_detail: [],
      latency: second
  },
  render: h => h(App)
})

我有一个 graphQL 服务器和一个 GraphQL 客户端，我想计算响应时间并将其放入 GraphQL 客户端 UI 以进行研究。

我成功计算了我的请求的响应时间，然后更新了“第二个”变量，然后我认为它会更新我的数据中的延迟，这也会在我的另一个组件中发生变化。但是我的组件只是呈现“second”的第一个值，并且在“second”更改时它不会更新（我通过 console.log 检查了它）。

如何将 javascript 变量从 main.js 绑定到 Vuejs 组件？

【问题讨论】：

标签： javascript vuejs2 graphql-js

【解决方案1】：

虽然我不完全确定您实际上是如何将latency 与其他组件一起使用，但您可以尝试为它创建一个计算属性。

这将确保每当您引用latency 时，它将返回second 变量的最新值。您可以在此处了解有关计算属性的更多信息：Vue Computed Properties

例如

var vm = new Vue({
     el: '#app',
     apolloProvider,
    
     data: {
         books: [],
          borrow_detail: []
     },

     computed: {
         // A computed getter for latency
         latency: function() {
             return second;
         }
     },

     render: h => h(App)
    })

注意：您可以像引用常规数据属性一样引用模板中的计算属性，即 E.g. <h1>{{latency}}</h1>

【讨论】：