laravel 7根据选定的值动态显示输入
Laravel 7是一种流行的PHP开发框架，它提供了丰富的功能和工具，用于快速构建高质量的Web应用程序。根据选定的值动态显示输入是指根据用户在前端页面上选择的某个值，动态地显示或隐藏相应的输入字段或表单元素。
在Laravel 7中，可以通过使用JavaScript和前端框架（如Vue.js或React）来实现根据选定的值动态显示输入。以下是一种实现方法的示例：
- 在前端页面上，使用HTML和JavaScript创建一个表单，并添加一个下拉菜单或复选框，用于选择动态显示输入的条件。
- 使用JavaScript监听下拉菜单或复选框的变化事件。
- 在事件处理程序中，根据选定的值，使用条件语句或逻辑判断来确定应该显示还是隐藏相应的输入字段或表单元素。
- 使用JavaScript操作DOM，通过添加或删除CSS类来显示或隐藏输入字段或表单元素。
下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Input Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label for="inputType">Select Input Type:</label>
<select id="inputType" v-model="selectedType">
<option value="text">Text</option>
<option value="number">Number</option>
<option value="email">Email</option>
</select>
<div v-if="selectedType === 'text'">
<label for="textInput">Text Input:</label>
<input type="text" id="textInput">
</div>
<div v-if="selectedType === 'number'">
<label for="numberInput">Number Input:</label>
<input type="number" id="numberInput">
</div>
<div v-if="selectedType === 'email'">
<label for="emailInput">Email Input:</label>
<input type="email" id="emailInput">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selectedType: 'text'
}
});
</script>
</body>
</html>在上述示例中，我们使用Vue.js来实现动态显示输入。根据用户选择的选项，使用Vue的条件渲染指令v-if来决定是否显示相应的输入字段。
对于Laravel 7的相关产品和产品介绍链接地址，可以参考腾讯云的云服务器CVM（https://cloud.tencent.com/product/cvm）和云函数SCF（https://cloud.tencent.com/product/scf）等产品，它们提供了强大的计算资源和灵活的扩展能力，适用于各种Web应用程序的部署和运行。
相关·内容
1回答
同时使用Vue.js和jQuery自动完成
javascript、jquery、jquery-ui、vue.js、jquery-ui-autocomplete
我希望同时使用Vue.js和jQuery来动态显示一个自动完成字段。
new Vue({
el: "#el",
data: {
toggle: false
}
});
var tags = [
"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
"Erlang","
浏览 0提问于2018-06-29得票数 2
回答已采纳
1回答
Vue multiselect laravel提交表单
laravel、vue.js、vue-multiselect
我有一个简单的表单： <form action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby=
浏览 11提问于2019-01-14得票数 3
1回答
将保留名称作为道具传递
javascript、vue.js
我有一大堆重复的表单输入，我想把它们抽象成一个组件。我想做以下几件事：
<InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType">
让它输出如下所示的代码
<template>
<div>
<label>Your name</label>
<input v-model="us
浏览 9提问于2017-01-17得票数 0
3回答
Vue + VUEX +类型记录+ Vue路由器。组件未被销毁
typescript、vue.js、vuejs2、vue-router、vuex
Vue.js版本= 2.3.3
向每个人提问。我有json，它包含一个数据列表，基于创建表单输入的json。表单输入有一个绑定的模型，它基本上更新了app状态槽提交。
我有一个组件，它呈现一个复选框列表，在一个页面上我有一个实例，而在下一个页面上，我有3个组件实例，每个实例都有他们的复选框列表，还有一个不同的名称。
当从第1页转到第2页时，第1页中的checkbox_list组件不会触发已销毁的生命周期挂钩(其他组件会触发此操作)。
在第2页中，我有3个checkbox_list类型的其他组件及其名称、模型和选项。(data被初始化为一个函数)。类型复选框列表的第三个组件不触发created钩
浏览 5提问于2017-05-25得票数 2
回答已采纳
1回答
在vue.js中将数组作为表行列出的正确格式
javascript、arrays、vue.js、vuejs2
我在这个网页上工作，我想要显示基于复选框选择的表行。我能够使用这个问题生成工作示例：Hide/show table rows based on checkbox 我的问题是我得到的是数组作为响应，而不是格式化的行。不知道我错过了什么。 请在此处检查小提琴：https://jsfiddle.net/4roe2kjq/1/ <html>
<style>
td {
border: thin solid black;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
padding-top:
浏览 25提问于2020-11-25得票数 0
回答已采纳
1回答
每次显示一个输入时的表单输入问题(Vue)
javascript、html、forms、vue.js
因此，我想在web应用程序中创建一个表单(使用Vue.js)，其中我一次显示一个表单字段。一旦输入正确填写并按下“next”按钮，它就需要在表单中显示下一个输入。
我的表格：
<form class="account-form">
<div class="input-field" v-if="formCount === 1">
<label for="email">E-mail</label>
<input id="email&#
浏览 2提问于2019-06-18得票数 0
回答已采纳
1回答
在提交时使用Vee-Validate和vue js 2验证子输入组件
javascript、forms、validation、vue.js、components
我目前正在尝试创建一个具有多个“输入字段”组件的注册表单，这些组件都需要在按下提交后进行验证。当其中的文本发生更改时，它们当前都会自动验证，但我发现很难对所有输入字段进行全局调用来验证所有。我试图实现的目标如下：
是的，这个问题比较简单，，但是我不明白
我有singleInput.vue
<template lang="html">
<div :class="'col m'+col">
<div class="input-field">
<i v-if="i
浏览 3提问于2017-04-10得票数 4
1回答
Jquery验证重置页面
javascript、jquery、jquery-validate
我刚开始使用javascript插件来验证表单中的数据，因此出现了问题。目前，第一个验证工作良好，并执行正确的jquery，但是表单第二部分的第二个验证在输入有效数据时重置页面。
下面是一个用来演示这个问题的小把戏：
您还可以查看css的版本，该版本完全可以在以下位置运行：
http://178.62.85.190/index.html
Javascript：
<script type="text/javascript">
$(document).ready(function () {
$("#buttonToSecondaryDetailsSec
浏览 3提问于2014-11-11得票数 1
回答已采纳
1回答
Vue 2 v-如果输入更改后不工作
vue.js
也许我做错了，但是当将v-如果绑定到两个不同的输入字段时，它只有在输入值没有改变的情况下才能工作。
var app = window.app = new Vue({
el: '#admin-app',
data() {
return {
language: "en"
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>
<script src="
浏览 0提问于2016-11-17得票数 1
回答已采纳
1回答
Vue 3中的Vue JS @change和@keydown事件
javascript、vue.js、vuejs3
我试图弄清楚keydown和change事件是如何在Vue.js (Vue 3)中一起工作的。设置非常简单。我在组件中有一个文本输入，我希望能够在文本输入字段中输入一个数字。在这里，我希望能够使用箭头键(向上和向下)来增加或减少输入中的值。当输入失去焦点时，它应该触发@change，然后更新模型。
我遇到的问题是，当我使用@keydown更新输入中的值时，它的行为方式与可打印字符的按键不同。更新@keydown上的值不会导致控件失去焦点时触发@change事件。
我在中设置了一个示例，如果这有帮助的话，但是下面是代码：
App.vue
<script>
import NumberI
浏览 38提问于2022-04-08得票数 1
回答已采纳
1回答
Vue JS中有条件禁用数量
javascript、vue.js、vuejs2、vue-component
我正在学习Vue JS，并且正在尝试条件输入组功能。我已经编写了如下代码。我有3种类型的输入组，radio button、select和quantity。我想选择自定义，只有当我选择type 1时，数量才会启用。我已经成功地使用了custom-select，但是对于我不能使用的数量，我希望当数量被禁用时，我不能点击+和-，并且红色边框变成#cacaca颜色。有人能帮我解决这个问题吗？ Vue.component('base-quantity', {
template: `
<div class="quantity__toggle
浏览 16提问于2021-04-08得票数 0
回答已采纳
2回答
在页面加载时使用Vuelidate验证表单
vue.js、vuejs2、vuelidate
我是Vuelidate的新手，我想知道我如何去验证加载的form，因为我似乎在任何地方都找不到答案？
我有我的验证完全工作时，使用Vuelidate空，所需的input或检查电子邮件是有效的。
我想要在加载时验证的原因是，data预先填充了我的表单，如果所有的inputs都填充并通过了验证，那么'Submit‘就会被启用，否则如果出现错误，我想让它disabled，所以我需要验证onload。
我的表单有inputs、selects和textarea。下面的代码片段是一些基本代码。
Vue.use(window.vuelidate.default)
const { required
浏览 3提问于2021-03-31得票数 0
1回答
您能使用v模型从数组中添加/删除元素吗？
javascript、vue.js
我对Vue.js很陌生，并试图戒掉好的老式DOM操作的习惯。我决定重新创建其中一个动态表单，其中可以根据用户输入添加一定数量的表单控件(本例中的文本输入)。
假设您必须指定您拥有的孩子的数量。对于每个子字段，将呈现名字和姓氏文本字段。
您可以使用inputtype="number“或手动更改子级的数量。
依赖关系：
vue@2
以下是我的HTML：
<div id="app">
<form>
<label for="childrenCount">Amount of children</label&
浏览 3提问于2020-12-03得票数 1
回答已采纳
8回答
插入日期选择器后，Jquery表单验证不起作用
jquery、validation、datepicker
我想创建一个预订(预订)表单与日期选择器文本字段，姓名，联系方式和bla bla bla。
当我的表单获得姓名输入文本字段、电子邮件输入文本字段、联系人输入文本字段和datepicker之外时，验证工作正常。
在我插入jquery datepicker之后，验证不起作用，而datepicker工作正常。
有谁能帮我一下吗？
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/validation.js" type
浏览 0提问于2011-01-03得票数 8
2回答
Axios和Vue.js呈现表单提交错误
javascript、vue.js、axios
我试图使用vue.js和axios在表单提交失败时呈现从服务器返回的错误消息。
构成部分：
<template>
<div>
<p>Sign Up</p>
<form v-on:submit.prevent="onSubmit">
<div>
<label>Email:</label>
<input type="text" name="user[email]" ref="u
浏览 0提问于2018-02-03得票数 1
回答已采纳
1回答
Vue.js使用单击事件在模式上填充表单字段值
javascript、vue.js
我有一个html模式的形式，将允许我更新选定的帖子。我已经创建了一个click事件，该事件获取所选帖子的数据，然后将这些数据传递给表单并填充字段。我的问题是，如果表单是用v隐藏的-如果我得到一个错误，说； 无法读取未定义的属性“”populateFormFields“” 我假设这是因为组件是隐藏的，所以函数不存在。 我想要发生的事情是，当在AppSummary.vue中单击一个帖子时，我希望获得此帖子数据，将其传递给UpdateForm.vue以填充字段，然后我希望显示此表单模式。解决这个问题的最好方法是什么？ 我的代码； /src/component/AppSummary.vue <
浏览 18提问于2020-03-25得票数 0
回答已采纳
2回答
Laravel5.6.7和特定组件的Vue.js中的自定义错误消息
vue.js、laravel-5.6、vee-validate
I使用Laravel5.6.7和vue.js
验证消息
当验证在vue.js中工作时，它表示“需要用户名字段”。可以是“请输入用户名”吗？对于同一字段，可以使用两条自定义错误消息吗？示例
所需:请输入用户名。
请只输入阿尔法字符。
我正在使用vee-验证包进行表单验证。
下面的是刀片中的代码
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12&#
浏览 1提问于2018-03-15得票数 1
回答已采纳
1回答
Vue.js与ASP.NET MVC
asp.net-mvc、vue.js
我刚刚开始尝试Vue.js，并将其应用于现有的ASP.NET MVC 5应用程序。
该应用程序有一个具有多个输入控件的表单：
<div id="vueApp">
...
@Html.TextBoxFor(model => model.FullName, new { @v_model = "fullName", @class = "form-control input" })
@Html.TextBoxFor(model => model.Branch, new { @v_model = "
浏览 0提问于2019-09-13得票数 2
回答已采纳
1回答
如何跳过第三步，跳到第四步
vue.js
这里我用vue.js编写了代码。我想跳过第三步到第四步。就像我们正在导航多步表单一样，我们处于第二步，从第二步开始，如果我们按下“下一步”按钮，那么它应该直接导航到第四步。意思是跳过第三步。因此，我正在努力实现这一点，如果有人有想法，请帮助我。
<div id="app">
<form>
<div v-if="step === 1">
<h1>Step One</h1>
<p>
<legend for="name">Your Na
浏览 0提问于2021-03-26得票数 0
回答已采纳
1回答
获取v-model值并使用v-for创建循环
javascript、html、vue.js、vuejs2
我有一个输入字段。此字段为包含数字。我想把这个数字和for循环一起使用。 在我的示例中，输入字段中有数字5，我想要写li五次。好了，是工作了！但是当我把数字改成10的时候，只有写10，它不再在循环中，也不会显示10倍的li循环。 如何使用v-for动态显示v-model值？ var app = new Vue({
el:'#app',
data: {
uTopX: 5,
}
}); <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g
浏览 38提问于2019-06-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
