Vue.js применен отмечен флажок на основе значения из проп

Question

Объяснение

Я использую Vue.js вместе с Laravel и в настоящее время использую его только для небольших компонентов. У меня есть флажок, для которого мне нужно, чтобы атрибут 'флажок' был либо истинным, либо ложным, в зависимости от значения из проп. Laravel устанавливает опору при загрузке компонента.

Когда страница загружается, флажок должен быть установлен в зависимости от значения реквизита. Таким образом, если для свойства установлено значение false, флажок не должен быть установлен, если он равен true, то его необходимо выбрать.

Прав ли я, полагая, что Laravel должен установить значение с помощью опоры, а затем ядолжен контролировать это, привязывая :checked к этому значению Props?

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>

Если бы кто-нибудь мог помочь мне обдумать это, я был бы очень благодарен!

Answer 1

Я бы попробовал следующий способ, в части Laravel (Blade):

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

И в компоненте VueJS:

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

Помните проблему с CamelCase, если Bladevar выглядит примерно так: 'your-var' в компоненте VueJs будет: 'yourVar'.

Надеюсь, это поможет!