vue.js多个选项下如何动态添加各自文本框input?

1:问题描述:比如页面上有A问题、B问题...甚至更多问题, A问题下可以动态增加文本框input,B问题下也可以动态增加input。现在遇到的bug是A问题增加input,B问题同时也增加input。同理B问题增加input时A问题也增加了。怎么区分开呢?删除也一样。

下面代码:

<template>
    <div>
        <ul>
            <li class="rep-item" v-for="(item,index) in list" :key="index">
                <div class="title border-bottom" @click="changeContent(index)">
                    <span>{{item.title}}</span>
                    <span  @click.stop="addInput(index)">增加</span>
                </div>
                <div class="box border-bottom" v-show="item.showContent">
                    <div v-for="(item, key) in inputs">
                        {{item.id}}: <input class="rep-ipt" type="text" v-model="item.val" placeholder="填写需要维修内容">
                        <span class="iconfont" @click="delInput(key)">&#xe608;</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                inputs: [],
                list:[
                    {
                        title: 'A问题',
                        showContent: false,
                    },
                    {
                        title: 'B问题',
                        showContent: false,
                    }
                ]
        }
        },
        methods:{
            changeContent(index){
                this.list[index].showContent = !this.list[index].showContent;
            },
            addInput (index) {
                var input = {}
                input.id = this.inputs.length
                input.val = ""
                this.inputs.push(input)
            },
            delInput (index) {
                this.inputs.splice(index, 1);
            },
        }
    }
</script>

我尝试在addInput里面加上index:

addInput (index) {
                var input = {}
                input.id = this.inputs[index].length
                input.val = ""
                this.inputs[index].push(input)
            },

在v-for inputs中加上index

v-for="(item, key) in inputs[index]"

貌似不对

图片说明

1个回答

list:[
            {
                    title: 'A问题',
                    showContent: false,
                    content:[]
            },
            {
                    title: 'B问题',
                    showContent: false,
                    content:[]
            }
    ]

可以再里面加个数组,在增加和删除的时候传递一个参数来判断是问题A或者B,比如判断title

deng_zhihao692817
deng_zhihao692817 解决了 谢谢
12 个月之前 回复
deng_zhihao692817
deng_zhihao692817 这个我也想过~ 但是方法addInput就写不出来了 我再想想怎么写addInput
12 个月之前 回复
deng_zhihao692817
deng_zhihao692817 这个我也想过~
12 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

VUE vue.config.js 配置 代理不生效

求助 使用VUE +axios 配置 跨域问题的时侯 vue.config.js 不生效 <br/> vue.config.js 文件<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589773253_87964.png) <br/> main.js 文件<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589772845_808542.png) <br/> 请求:<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589772896_587765.png) <br/> 结果<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589773390_574023.png) <br/> 它还是报了一个错误,而且 代理设置并没有生效 求助 ...如何让它生效 使代理正常..........

允许在vue.js Web应用程序中动态创建sitemap.xml

<div class="post-text" itemprop="text"> <p>I have a Vue.JS single page application with a PHP back-end running on apache. The app is running fine, using the vue.js routing to navigate between pages.</p> <p>I want to dynamically create an XML sitemap based on records in a database (each record has it's own page). I have a .php file which generates the XML and returns text/xml.</p> <pre><code>&lt;?php header("Content-type: text/xml"); ?&gt; &lt;urlset xmlns="http://www.google.com/schemas/sitemap/0.84" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84 http://www.google.com/schemas/sitemap/0.84/sitemap.xsd"&gt; &lt;url&gt; &lt;loc&gt;https://myapp.com/&lt;/loc&gt; &lt;priority&gt;1.00&lt;/priority&gt; &lt;/url&gt; &lt;?php ###### Code for calling the DB ?&gt; &lt;/urlset&gt; </code></pre> <p>In my .htaccess file, I'm redirecting sitemap.xml to my sitemap.php page. </p> <pre><code>&lt;IfModule mod_rewrite.c&gt; RewriteEngine on RewriteRule ^sitemap\.xml$ /php/sitemap.php [L] RewriteRule ^([A-Za-z0-9-]+)/?$ index.php?shortName=$1 [NC,L] &lt;/IfModule&gt; </code></pre> <p>However, the vue.js router is intercepting the request and displaying my 404 page.</p> <pre><code>const routes = [ // home {name: 'home',path: '/',component: Home}, // all my other routes here // 404 catch-all { path: '*', component: NotFound} ] </code></pre> <p>Is there a way to ignore certain routes in the vue.js router? Or am I going about this the wrong way?</p> </div>

idea2017的安装了vue.js插件后清缓存重启后,在创建vue工程下的static web下依然没有看见vue.js

如图所示: 1.插件安装成功图例如下: ![图片说明](https://img-ask.csdn.net/upload/202004/25/1587783439_203983.png) 2. 新建工程时,static web下的显示情况如下: ![图片说明](https://img-ask.csdn.net/upload/202004/25/1587783571_650364.png)

vue cli3中跨域及vue.config.js配置问题

求各位大神帮忙看看 我这个报错怎么解决: ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564453052_649237.png) 为什么这里地址还是http://localhost:8080的地址 | | | | 下面是我代码: | | | vue.config.js的配置: ``` devServer: { proxy: { '/api': { target: 'http://sandbox.starpos.com.cn/', changeOrigin: true,//设置是否跨域 ws:true, } } } ``` 这是我的请求: ``` getIndustry(){ this.$http.get("/emercapp").then(res=>{ console.log(res); if(res.status=200){ return res.data }else{ return error } }).then(data=>{ console.log(data) }) } ```

在html文件中引用vue.js和直接创建.vue文件有什么差别??

在html文件中引用vue.js和直接创建.vue文件有什么差别??

VUE.JS插件提示插件未定义怎么解决?

html代码如下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插件</title> </head> <body> <div id="test"> <p v-my-directive='msg'></p> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/vue-myPlugin.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.use(MyPlugin) Vue.myGlobalMethod() const vm=new Vue({ el:'#test', data:{ msg:'I liKe EaT' } }) vm.$myMethod() </script> </body> </html> ``` 插件代码如下 ``` (function(){ const MyPlugin={} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log("执行了myGlobalMethod方法") } // 2. 添加全局资源 Vue.directive('my-directive',function(el,binding){ el.textContent = binding.value.toLowerCase() }) // 3. 注入组件选项 // Vue.mixin({ // created: function () { // // 逻辑... // } // ... // }) // 4. 添加实例方法 Vue.prototype.$myMethod = function(){ console.log("执行了$myMethod实例方法") } } //向外暴露 window.MyPlugin=MyPlugin }) `` 都是照着网课老师的代码敲得,不知道哪里出错了一直提示 Uncaught ReferenceError: MyPlugin is not defined 求问各路大佬怎么解决

解決vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves

vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves ``` <script> import waves from '@/components/directive/waves' export default { components: { Pagination }, directives: { waves } ...... } </script> ```

使用Vue.extend动态创建的组件,怎么使用v-model接出值?

使用Vue.extend动态创建的组件,怎么在组件上设置v-model接出值,并监听

Vue.js怎么在列表渲染同时添加样式?

在下起步小白,在写微信小程序的时候用列表渲染可以实现样式,如图![小程序代码截图](https://img-ask.csdn.net/upload/201705/02/1493708510_587619.jpg);我想着vue和小程序很像,就想试试用同样的方法渲染样式,但貌似不行。请问各位大神vue可不可以类似实现或者更简便实现???

Vue.js 关于Vue.js中样式引入问题

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?

vue.js在<head>头文件不被使用的问题

1.我通过button来调用vue方法但是我的方法放在body和html外部的时候可以正确使用, 但是放在head里面就出错 2.问题代码 ```<script> var vm=new Vue({ el: '#app', data: { showin: true, message: 'Hello Vue!' } }) </script> ``` 3.代码放在head里面出错,但是放在body和html外面不被调用 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el: '#app', data: { showin: true, message: 'Hello Vue!' } }) </script> </head> <body> <div id="app"> <div class="app"> <button @click="showin =!showin"> 增加</button> <a > 删除</a> <a > 插入</a> </div> <div v-show="showin"> <table border="1"> <tr> <th>id</th> <th>村民</th> </tr> <tr> <td>1 </td> <td>张三</td> </tr> </table> </div> </div> </body> </html> ```

vue.js的ajax方法(不用jquery)如何加headers??

vue.js的ajax方法(不用jquery)如何加headers??官方例子没有headers...

如何将laravel模板与Vue.js集成

<div class="post-text" itemprop="text"> <p>I have created my website in Laravel 5 with template integrated in it. Now I want to add chat feature in my website, so I decided to use Vue.js. The problem is that when I setup Vue.js in my project, the page template of that page in which vue.js is used is not working. I mean that all the css and js file of laravel getting mess up. Page looks horrible. How Can I use my existing template with Vue.js?</p> <pre><code>&lt;head&gt; &lt;link rel="stylesheet" href="{{ URL('css/style.css?version=2') }}" /&gt; &lt;link rel="stylesheet" href="{{ URL::asset('css/ionicons.min.css') }}" /&gt; &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt; &lt;link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="custom-search-input"&gt; &lt;div class="input-group col-md-12"&gt; &lt;input type="text" class=" search-query form-control" placeholder="Conversation" /&gt; &lt;button class="btn btn-danger" type="button"&gt; &lt;span class=" glyphicon glyphicon-search"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="app"&gt; &lt;example-component&gt;&lt;/example-component&gt; &lt;/div&gt; &lt;div class="dropdown all_conversation"&gt; &lt;button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt; &lt;i class="fa fa-weixin" aria-hidden="true"&gt;&lt;/i&gt; All Conversations &lt;span class="caret pull-right"&gt;&lt;/span&gt; &lt;/button&gt; &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu2"&gt; &lt;li&gt;&lt;a href="#"&gt; All Conversation &lt;/a&gt; &lt;ul class="sub_menu_ list-unstyled"&gt; &lt;li&gt;&lt;a href="#"&gt; All Conversation &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script type="text/javascript" src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p>ExampleComponent.vue</p> <pre><code> &lt;template&gt; &lt;div class="container"&gt; &lt;div class="row justify-content-center"&gt; &lt;div class="col-md-8"&gt; &lt;div class="card card-default"&gt; &lt;div class="card-header"&gt;Example Component&lt;/div&gt; &lt;div class="card-body"&gt; I'm an example component. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p><a href="https://i.stack.imgur.com/GDufn.png" rel="nofollow noreferrer">Console warnings and errors</a></p> </div>

如何将锚链接转为固定链接,vue.js开发的?

如何将锚链接转为固定链接,vue.js开发的? 如何将锚链接转为固定链接,vue.js开发的? 听说锚链接不利于seo,可是不知道Vue.js能不能切换模式?

vue.js 请求方法设置同步问题

使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 目前vue 默认为异步请求,调用的第一个方法还没有渲染完页面, 第二个方法就已经请求了,造成页面获取值为未更新之前的数据。 现在想完成的形式: 定义一个vue,6个方法中,不设置就使用异步, 有一个方法需要单独设置为执行同步。 请大神说说vue的思路。就是需要vue实现部分方法同步 【ps:想说使用ajax的或者把第二个参数写在第一个参数里边的就不用说了】

vue.js 关于打包与部署的问题

vue.js 关于打包与部署的问题,vue.js具体怎么打包与部署

如何在Laravel 5.7中使用Vue.js文件(不是CDN)?

<div class="post-text" itemprop="text"> <p>I have almost completed my Admin Panel in laravel 5.7, however needed to use VueJS for some component. I am aware Vue comes by default with laravel, and also saw the app.js file under resources/js directory in laravel. </p> <p>However, is there a possibility where I can use Vue.js file that I have downloaded, and import it with the script tag? I tried by placing the script and vue code in the blade file itself, but it conflicts with the laravel {{ blade_syntax }}. </p> <p>Is there a systematic way to not use VueCLI, or CDN, but the plain vuejs file? Need I copy the vuejs file i downloaded inside Laravel Project? If so, where should I place the file?</p> <p>Or am I going wrong somewhere?</p> <p>Any suggestion would be highly appreciated.</p> </div>

webstrom配置新版vue.js,启动项目后停止

![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551547_956798.png) ![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551557_993884.png) 新版本vue.js,已经没有了dev.server.js,配置build.js后,项目启动后自动关闭,如果直接执行命令npm run dev,项目能正常启动

webStorm无法解析vue.js怎么解决?

把vue.js文件放入webStorm的项目文件夹里 ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468378_934721.png) 提示please sprcify Node.js interpreter ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468452_961945.png) 且在html文件夹中提示无法解析,该怎么解决

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 解析cad c#数字格式化万 c#int转byte c#格式化日期 c# wpf 表格 c# 实现ad域验证登录 c#心跳包机制 c#使用fmod.dll c#dll vb 调用 c# outlook
立即提问
相关内容推荐