Vue.js 根据 Prop 中的值在复选框上应用选中

Question

Explaination

I'm running Vue.js alongside Laravel and only using it for small components at the moment. I have a checkbox which I need the attribute 'checked' to either be true or false depending on the value from the Prop. The prop is being set by Laravel when the component is loaded in.

When the page loads, the checkbox should be checked depending on the value of the prop. So if the prop is set to false, the checkbox should not be selected, if it's true then the it needs to be selected.

Am I right in thinking that Laravel should set the value via a prop and then I should control that by binding :checked to that Props value?

view.blade.php

<public-toggle status="true"></public-toggle>

PublicToggle.vue

<template>
    <div>
        <label class="text-xs font-bold uppercase text-grey-700 mr-2"><i class="fa-question-circle fad text-blue-500 text-sm"></i> Public</label>
        <label class="switch">
            <input type="checkbox" v-bind:value="status" v-on:change="updatePublicStatus" v-model="status" v-bind:checked="status">
            <span class="slider round"></span>
        </label>
    </div>
</template>
<script>
import Swal from 'sweetalert2'
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
})
export default {
    data() {
        return {
            // status: '',
        }
    },
    methods: {
        updatePublicStatus: function() {
            if(this.status == true) {
                Toast.fire({
                    type: 'success',
                    title: 'Public'
                })
            } else {
                Toast.fire({
                    type: 'success',
                    title: 'Private'
                })
            }
        }
    }
}
</script>

If anyone could help me get my head round this, I would be very grateful!

Answer 1

I would try the following way, in the Laravel (Blade) part:

<public-toggle :status="{{$status}}"></public-toggle>

And in the VueJS component:

data(){
// your data
},
props: ['status'],

Remember the CamelCase issue, if the Blade var is something like: 'your-var' in VueJs component will be: 'yourVar'.

Hope it helps!

Answer 2

hi first you need to pass the variable props like this

<public-toggle :status="true"></public-toggle>

then you have to get it in the vue file like this

props:{
 status:Boolean
}

just fix thats and it will work... i think:)