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

如果将hidden添加到conversation对象中，它将起作用。 Vue会寻找对象，如果对象未定义，它将无法正常工作。

conversation: {
    hidden: false
}

看看jsFiddle示例 https://jsfiddle.net/eywraw8t/141516/

Answer 2

也许您可以尝试条件渲染：

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>

Axios之后Vue.js v-show无法正常工作

2 个答案: