jeudi 20 février 2020

Vue Js select dropdown selected not working in my Edit form using Laravel 5.4

Hi i have this vue js select dropdown. Now my problem is when i go to edit page then my select dropdown using Vue Js is not working it is not selected. My previous project works well in my current is not working. I use the same code. Here is my code below

my edit form views

<div class="col-md-2">
    <label>Time</label>
    <div id="app-time">
        <select name="time" class="form-control">
            <option value="0">--Please Select--</option>
            <option v-for="time in times" v-bind:value="time.value"
            :selected="time.value==?true : false">
                @
            </option>
        </select> 
    </div>
</div>

My vue js script

<script>
    //branch data
    new Vue({
    el: '#app-time',
        data: {
            times:[
                { text:'12:00 AM', value: '12:00 AM' },
                { text:'1:00 AM', value: '1:00 AM' },
                { text:'2:00 AM', value: '2:00 AM' },
                { text:'3:00 AM', value: '3:00 AM' },
                { text:'4:00 AM', value: '4:00 AM' },
                { text:'5:00 AM', value: '5:00 AM' },
                { text:'6:00 AM', value: '6:00 AM' },
                { text:'7:00 AM', value: '7:00 AM' },
                { text:'8:00 AM', value: '8:00 AM' },
                { text:'9:00 AM', value: '9:00 AM' },
                { text:'10:00 AM', value: '10:00 AM' },
                { text:'11:00 AM', value: '11:00 AM' },
                { text:'12:00 PM', value: '12:00 PM' },
                { text:'1:00 PM', value: '1:00 PM' },
                { text:'2:00 PM', value: '2:00 PM' },
                { text:'3:00 PM', value: '3:00 PM' },
                { text:'4:00 PM', value: '4:00 PM' },
                { text:'5:00 PM', value: '5:00 PM' },
                { text:'6:00 PM', value: '6:00 PM' },
                { text:'7:00 PM', value: '7:00 PM' },
                { text:'8:00 PM', value: '8:00 PM' },
                { text:'9:00 PM', value: '9:00 PM' },
                { text:'10:00 PM', value: '10:00 PM' },
                { text:'11:00 PM', value: '11:00 PM' }
            ]
        }
    })  
</script>

In my views i use this line of code in here

:selected="time.value==?true : false"

Can someone help me figured this thing out? TIA. Any help is muchly appreciated. Thanks



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire