Vue Js выберите раскрывающийся список не работает в моей форме редактирования, используя Laravel 5.4 - PullRequest
Новая
       13

Vue Js выберите раскрывающийся список не работает в моей форме редактирования, используя Laravel 5.4

0 голосов
/ 21 февраля 2020

Привет, у меня есть vue js выбор выпадающего списка. Теперь моя проблема в том, что когда я go редактирую страницу, мой выпадающий список, использующий Vue Js, не работает, он не выбран. Мой предыдущий проект работает хорошо, мой текущий не работает. Я использую тот же код. Вот мой код ниже

мои виды редактирования формы 

<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=={{json_encode($getDeliveryReceipt['time'])}}?true : false">
                @{{ time.text }}
            </option>
        </select> 
    </div>
</div>

Мой vue js скрипт 

<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>

В моих взглядах я использую эту строку кода здесь 

:selected="time.value=={{json_encode($getDeliveryReceipt['time'])}}?true : false"

Может кто-нибудь помочь мне разобраться в этом? ТИА. Любая помощь очень ценится. Спасибо

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Не используйте метод json_encode с двойной кавычкой в ​​интерполяции, потому что она будет генерировать строку с заключением в двойные кавычки. 

echo json_encode('12:00 AM'); //"12:00 AM"

Использование интерполяции с одинарной кавычкой 

<option v-for="time in times" 
  v-bind:value="time.value" 
  :selected="time.value == '{{$getDeliveryReceipt['time']}}'"
 >{{time.text}}</option>

https://stackblitz.com/edit/vue-wqqydg?file=index.html

0 голосов
/ 21 февраля 2020

Вместо :selected вам нужно использовать v-model для вашего выбора следующим образом. 

<div class="col-md-2">
    <label>Time</label>
    <div id="app-time">
        <select name="time" class="form-control" v-model="selectedValue">
            <option value="0">--Please Select--</option>
            <option v-for="time in times" :value="time.value">
                @{{ time.text }}
            </option>
        </select> 
    </div>
</div>

Подробнее об этом можно прочитать здесь

...