Vue Js - Как получить подробный просмотр страницы при нажатии на поле ввода

Question

Я новичок в Vuejs, и в настоящее время я хотел показать подробный вид страницы, когда я нажимал на поле ввода

 <div class="form-group row">
 <label for="name" class="col-sm-2 col-form-label">Name</label>
 <div class="col-sm-10">
 <input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
 <span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
 </div>
 </div>

Выше - код моего имени поля ввода, и я хочу показать подробности поля ввода, когда я щелкнул по нему, я также прикрепил снимок экрана моего представления, где я хотел щелкнуть и показать подробный вид страницы

введите описание изображения здесь

Если я нажму на поле u-blox, я захочу отобразить подробный вид. Как я могу этого добиться?

Answer 1

Вопрос не очень ясен. Может быть, вы можете поделиться еще кодом или скрипкой для лучшей помощи. Насколько я понимаю из вопроса, вы можете выбрать подход, основанный на маршрутизации. Или, если нужно, чтобы все было просто, просто визуализируйте подробное представление условно с помощью директивы v-if.

    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
           <input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
           <span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
       </div>
   </div>
   <div v-if="showDetailsView">
       Details View template or Component can be rendered here.
   </div>

Переменная showDetailsView может быть переключена через прослушиватель кликов, привязанный к u-blox element.

Пожалуйста, обратитесь к https://router.vuejs.org/ для Vue -Router и https://vuejs.org/v2/guide/conditional.html#v -if для условной визуализации.