vue 点击添加多个input及多个关键字

<template>
<div><div class="input-info"><el-button type="primary" size="small" @click="addInput">添 加</el-button><div v-for="(item,i) of eventPlanForm.matchKeywordArray" :key="i" ><el-input type="text" v-model="keywordList[i]" placeholder="可添加多个关键词，回车键确认" size="small" clearable@keyup.13.native="enterFun(1,i)" style="width:480px;margin-right:10px"></el-input><span class="iconfont el-icon-remove text-red" style="cursor:pointer" @click="removeInput">移除</span><div class="textarea-info"><el-tag :key="tag" v-for="tag in eventPlanForm.matchKeywordArray[i]" closable :disable-transitions="true"size="small" @close="keywordClose(tag,1,i)">{{tag}}</el-tag></div></div><div><el-input v-model="ambiguityKeywordArray" placeholder="可添加多个关键词，回车键确认" style="margin-top:15px" size="small" @keyup.13.native="enterFun(2)"></el-input><div class="textarea-info"><el-tag :key="tag" v-for="tag in eventPlanForm.ambiguityKeywordArray" closable :disable-transitions="true"size="small" @close="keywordClose(tag,2)">{{tag}}</el-tag></div></div></div>
</div>
</template><script>export default {data() {return {keywordList:[],ambiguityKeywordArray:'',eventPlanForm: {matchKeywordArray:[],ambiguityKeywordArray:[],},};},
methods:{// 添加inputaddInput() {this.keywordList.push('')this.eventPlanForm.matchKeywordArray.push([])},// 移除inputremoveInput() {this.keywordList.pop('')this.eventPlanForm.matchKeywordArray.pop([])},//关键字添加enterFun(num,i) {if (num == 1) {if (this.keywordList[i].replace(/(^\s*)|(\s*$)/g, "") == '') {this.keywordList[i] = '';return;}if (this.eventPlanForm.matchKeywordArray[i].indexOf(this.keywordList[i]) == -1) {this.eventPlanForm.matchKeywordArray[i].push(this.keywordList[i])this.keywordList[i] = ''console.log(this.eventPlanForm.matchKeywordArray)} else {this.$message.warning('该关键字已经添加')this.keywordList[i] = ''}}if (num == 2) {if (this.ambiguityKeywordArray.replace(/(^\s*)|(\s*$)/g, "") == '') {this.ambiguityKeywordArray = '';return;}if (this.eventPlanForm.ambiguityKeywordArray.indexOf(this.ambiguityKeywordArray) == -1) {this.eventPlanForm.ambiguityKeywordArray.push(this.ambiguityKeywordArray.replace("\n",''))this.ambiguityKeywordArray = ''console.log(this.eventPlanForm.ambiguityKeywordArray)} else {this.$message.warning('该关键字已经添加')this.ambiguityKeywordArray = ''}}},//关键字删除keywordClose(tag, num,i) {if (num == 1) {this.eventPlanForm.matchKeywordArray[i].splice(this.eventPlanForm.matchKeywordArray[i].indexOf(tag), 1);console.log(this.eventPlanForm.matchKeywordArray)}if (num == 2) {this.eventPlanForm.ambiguityKeywordArray.splice(this.eventPlanForm.ambiguityKeywordArray.indexOf(tag), 1);console.log(this.eventPlanForm.ambiguityKeywordArray)}},}};
</script><style scoped>
.input-info{width: 600px;margin: 50px auto;background: #fff;padding:30px;line-height: 40px;
}
.el-tag{margin-right:5px;}
</style>

vue 点击添加多个input及多个关键字相关推荐

vue中点击添加class，双击去掉class
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...
Vue 点击添加一行和删除一行
我用的是:vue + element ui 直接代码. html: <template><el-main><el-button type="primary&q ...
html编辑点击取消复原,vue点击编辑按钮，内容变成input可以修改，也可以删除
一.效果图1 图2,点击报错之后,又变成图1的效果二.使用到了element UI中的以下组件: 三.使用的关键点是vue中的v-if指令四.关键代码如下 HTML部分添加街道编辑保存 @ ...
vue项目-点击添加或者修改按钮浏览器的屏幕变黑，再次点击屏幕之后浏览器恢复正常（火狐浏览器、ChromeCoreLauncher双核浏览器）
今天在写springboot+vue项目的时候发现了一个bug,之前写的项目就没有这种情况,bug如下: 点击添加或者修改按钮浏览器的屏幕变黑,再次点击屏幕之后浏览器恢复正常点击修改按钮屏幕变黑 ...
方维模板修改，发布分享、主题有商品时，标签需自动写到input里，不要再手动去点击添加，手动点击可取消...
方维模板修改,发布分享.主题有商品时,标签需自动写到input里,不要再手动去点击添加,手动点击可取消方维购物分享系统模板修改,发布分享.主题有商品时,标签需自动写到input里,不要再手动去点击添 ...
vue 点击文字input_vue input实现点击按钮文字增删功能示例
本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: content="width=device-width, user-scalable=no, in ...
file input 点击没反应_点击添加附件没反应
老师,我点击添加附件之后,没有任何反应,浏览器底部出现一条javascript:void(0),并不出现文件选择框,求解<?php require_once '../include.php'; ...
使用Bootstrap + Vue.js实现添加删除数据
界面首先需要引入bootstrap的css和vue.js,jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 C ...
后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块一.总结一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

vue 点击添加多个input及多个关键字

vue 点击添加多个input及多个关键字相关推荐

最新文章

热门文章