Vue.js 根據 Prop 中的值在復選框上應用選中

Question

解釋

我將 Vue.js 與 Laravel 一起運行，目前僅將其用於小型組件。 我有一個復選框，我需要屬性“已檢查”為真或假，具體取決於道具的值。加載組件時，該道具由 Laravel 設置。

頁面加載時，應根據道具的值選中復選框。 因此，如果 prop 設置為 false，則不應選中該復選框，如果為 true，則需要選中它。

我是否認為 Laravel 應該通過道具設置值，然后我應該通過綁定:checked到該道具值來控制它？

view.blade.php

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

公共切換.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 問題，如果 Blade var 類似於：VueJs 組件中的“your-var”，則為：“yourVar”。

希望能幫助到你！

Answer 2

嗨首先你需要像這樣傳遞變量道具

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

然后你必須像這樣在vue文件中獲取它

props:{
 status:Boolean
}

只需修復它，它就會起作用......我認為:)