Vue Js - 单击输入字段时如何获取详细页面视图答案

【问题标题】：Vue Js - How to get detail page view when clicked on input fieldVue Js - 单击输入字段时如何获取详细页面视图
【发布时间】：2020-11-02 14:51:07
【问题描述】：

我是 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 字段，我想显示详细视图。我怎样才能做到这一点？

【问题讨论】：

标签： javascript vue.js events input

【解决方案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 元素的点击侦听器进行切换。

请参考 https://router.vuejs.org/ 了解 Vue-Router 和 https://vuejs.org/v2/guide/conditional.html#v-if 了解条件渲染。

【讨论】：