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

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

Explaination

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

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

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

view.blade.php

 {amp}lt;public-toggle status="true"{amp}gt;{amp}lt;/public-toggle{amp}gt; 

PublicToggle.vue

 {amp}lt;template{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label class="text-xs font-bold uppercase text-grey-700 mr-2"{amp}gt;{amp}lt;i class="fa-question-circle fad text-blue-500 text-sm"{amp}gt;{amp}lt;/i{amp}gt; Public{amp}lt;/label{amp}gt; {amp}lt;label class="switch"{amp}gt; {amp}lt;input type="checkbox" v-bind:value="status" v-on:change="updatePublicStatus" v-model="status" v-bind:checked="status"{amp}gt; {amp}lt;span class="slider round"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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' }) } } } } {amp}lt;/script{amp}gt; 

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector