Laravel Vuejs - 在本地而不是生产服务器中输入复选框更新

Question

我有一个使用动态laravel 5.5数据的vuejs 2.5.13的Web项目。

在page.blade.php中，我有一个 vue 组件post-list.

page.blade.php:
<post-list :posts="{{json_encode($posts)}}"></post-list>

在post-list：

post-list.vue:
<template>
<div class="post-list">
<ul class="list-group">
<li v-for="post in postdata">
{{post.publish}}
<input type="checkbox" v-model="post.publish" @click="togglePublish(post.id,post.publish)">
</li>
</ul>
</div>
</template>
<script>
...
props: ['posts'],
data: function() {
return {
postdata: [],
}
beforeMount: function() {
var self = this;
self.postdata = self.posts.data;
...
},
</script>

模板中的{{post.publish}}是 0 ，这与服务器相同，但复选框只是没有更新，每次都保持选中状态。

还有一件事要指出，它在当地工作正常。但在上传到 Web 服务器时未更新。我不知道为什么。

我该如何解决这个问题？

更新01

奇怪。我只是取出v-model，复选框总是取消选中，这是正常的。但是当添加v-model="post.publish"时，即使post.publish的值为 0，该复选框仍然处于选中状态。

Answer 1

好的，我找到了一个解决方法：

而不是

<input type="checkbox" v-model="post.publish" @click="togglePublish(post.id,post.publish)" data-toggle="tooltip" data-placement="top" title="click to publish/unpublish">

我把它改成：

<input v-if="post.publish == false" type="checkbox" @click="togglePublish(post.id,post.publish)" data-toggle="tooltip" data-placement="top" title="click to publish/unpublish">
<input v-if="post.publish == true" type="checkbox" @click="togglePublish(post.id,post.publish)" data-toggle="tooltip" data-placement="top" title="click to publish/unpublish" checked>

尽管看起来很愚蠢，但它有效。

我仍然不确定问题是什么过程。但我会把这个作为答案，以防有人面临同样的情况。

如果有人有其他见解，请分享。