laravel vuejs - input checkbox update in local but not production server

Question

I have a web project that using vuejs 2.5.13 with dynamic laravel 5.5 data.

in the page.blade.php i have a vue component post-list .

page.blade.php:

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

and in 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>

The {{post.publish}} in the template is 0 , which is the same as the server, but the checkbox just did not update, it keep checked every time.

One more thing to point out, it works fine in the local. But did not update when upload to the web server. I am not sure why.

How can I resolve this?

Update01

Weird. I just take out the v-model and the checkbox is always uncheck, which is normal. but when v-model="post.publish" added, even the value of post.publish is 0, the checkbox still checked.

Answer 1

Ok, I found a work around:

Instead of

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

I changed it to:

<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>

Stupid as it may seem, it works.

I am still not sure what course the issue. But I will put this here as answer in case somebody face the same scenario.

If anyone have any other insight, please share.