代码之家 › 专栏 › 技术社区 › minisaurus

Vue未更新

vuejs2 html javascript

minisaurus · 技术社区 · 6 年前

<div id="error" class="col s12 red center">
  <span v-if="seen">
    Error fetching readings: {{ msg }}
  </span>
</div>

Vue:

var error = new Vue({
  el: '#error',
  data: {
    msg: '',
    seen: false
  },
  methods: {
    show: function(message) {
      this.msg = message;
      this.seen = true;
    },
    hide: function() {
      this.seen = false;
    }      
  }
});

fetch( ... )
.then(...)
.catch(err => {
    error.show( err );
    loader.hide();
});

错误。显示()显示先前隐藏的div,但显示:

Error fetching readings: {}

为什么?

2 回复 | 直到 6 年前

Ben Croughs 6 年前

可以找到样本,检查代码地狱世界.vue在组件文件夹中 https://codesandbox.io/s/x2klzr59wo

<template>
  <div id="error" class="col s12 red center">
    {{ seen }}
    <hr />
    <span v-if="computedSeen"> Error fetching readings: {{ msg }} </span>
    <hr />
    <button @click="show('effe');">SHOW</button> &nbsp;
    <button @click="hide();">HIDE</button>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "",
      seen: false
    };
  },
  methods: {
    show: function(message) {
      this.msg = message;
      this.seen = true;
    },
    hide: function() {
      this.seen = false;
    }
  },
  computed: {
    computedSeen: function() {
      // `this` points to the vm instance
      return this.seen;
    }
  }
};
</script>