Vue.js v-шоу не работает после axios

Question

v-show не работает, как я ожидал, я предполагаю, что это потому, что this.conversation.hidden не устанавливается, когда браузер отображается, так как он приходит с асинхронным вызовом. В таком случае, как я могу заставить это работать?

Спасибо, в процессе! И скажите мне, если мое описание недостаточно ㅠ

<template>
    <div>
      <div v-show="conversation.hidden">hidden</div>
      <div v-show="!conversation.hidden">not hidden</div>

      <button @click="conversation.hidden = false">Click Me!</button>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      conversation: {},
    };
  },
  created() {
    axios.get('request_something', {
    }).then((response) => {
      this.conversation = response.data;
      this.conversation.hidden = true;
    });
  },
};
</script>

--------- решаемые -------------- как упоминалось в моем комментарии @thanksd, использование Vue.set () решит эту проблему. Я должен был объяснить более кратко со своим вопросом, но он знал, что я искал. :) Спасибо тем, кто мне тоже ответил.

Answer 1

Возможно, вы можете попробовать условный рендеринг:

export default {
  data() {
    return {
      conversation: {
        data: [], 
        hidden: false 
      }
    }
  },
  created() {
    axios.get('request_something', {
    }).then((response) => {
      this.conversation.data = response.data
      this.conversation.hidden = true
    })
  },
  methods: {
    showConversation() {
      this.conversation.hidden = false
    }
  }
}

<div v-if="conversation.hidden">Hidden</div>
<div v-else>Not Hidden</div>
<button @click="showConversation">Click Me!</button>

Answer 2

Если вы добавите hidden к вашему conversation объекту, он будет работать. Vue будет искать объект, и если объект не определен, он не будет работать.

conversation: {
    hidden: false
}

взгляните на пример jsFiddle https://jsfiddle.net/eywraw8t/141516/