Vue.js。数据字段不绑定答案

【问题标题】：Vue js. Data fields not bindingVue.js。数据字段不绑定
【发布时间】：2018-03-25 13:28:36
【问题描述】：

我对 Vue 元素有以下定义：

new Vue({
  el: "#app",
  data: {
    latitude1: 'a',
    name: 'aa'
  },
  mounted() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.latitude1 = position.coords.latitude;
      })
    } else {
      this.latitude1 = "WTF??"
      // this doesn't work either:
      // this.$nextTick(() => { this.latitude1 = "WTF??" })
    }
  },
  methods: {
    // button works... WTF?!?
    doIt() {
      this.latitude1 = "WTF??"
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div>{{ latitude1 }}: {{ name }}</div>
  <button @click="doIt">Do it</button>
</div>

我可以看到正在填充的位置数据。警报显示纬度，但数据字段 latitude1 的 2 路绑定不起作用。我曾尝试使用此存储对象状态，但也没有用。

我的html如下：

<div class="form-group" id="app">
 <p>
   {{latitude1}}
 </p>
</div>

【问题讨论】：

标签： javascript html vue.js vuejs2 two-way-binding

【解决方案1】：

在 Vue.js 中要做的一件事是使用定义的方法来更改响应式属性。

这是我为它提供的代码：

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

new Vue({
  el: "#app",
  data: {
    latitude1: 'a',
    name: 'aa'
  },
  mounted: function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        console.log(position.coords.latitude);
        Vue.set(this, 'latitude1', position.coords.latitude);
      }, error, options)
    }
  }
});

我还为导航器查询设置了错误处理程序和选项。要查看结果，请检查控制台。

【讨论】：