Vue.js v-show 在 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

如果将hidden添加到conversation对象中，它将起作用。Vue 将查找对象，如果对象未定义，它将不起作用。

conversation: {
hidden: false
}

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

Answer 2

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

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

<script>
export default {
data() {
return {
conversation: {
data: [], 
hidden: true 
}
}
},
created() {
axios.get('/endpoint').then((response) => {
if (response.data) {
this.conversation.data = response.data
this.conversation.hidden = false      
}
})
},
methods: {
toggleConversation() {
this.conversation.hidden = !this.conversation.hidden
}
}
}
</script>