Vue не обновляется

Question

Я новичок в Vue js - следующее не обновляется:

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

Вю:

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();
});

error.show () отображает ранее скрытый div, но отображает:

Error fetching readings: {}

Почему?

Answer 1

Упс, проблема была err из fetch является объектом, и я должен был использовать err.message.

В моем коде у меня был console.log('Error: %s', err), который, кажется, форматировал объект err в текст. Вот что меня бросило: (

К сожалению.

Answer 2

Я создал образец CodeSandbox на основе вашего кода, вам нужно иметь вычисляемое свойство, чтобы иметь реактивность Vue

Пример можно найти, проверьте код в HelloWorld.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>