vue项目无法删除的问题及解决

目录
  • vue项目无法删除
  • vue新增与删除问题

vue项目无法删除

问题

今天删除本地的vue项目,一直提示“操作无法完成,因为其中的文件夹或文件已在另一个程序组打开,请关闭该文件夹或文件,然后重试”。

但是相关的软件我都关闭了,还是不行。如图

解决

我们ctrl+alt+delete打开任务管理器,点击详细信息,找到node.exe

右击选择结束任务,然后点击结束进程,然后就可以成功删除项目了。

vue新增与删除问题

<template>
  <div>
    <ul v-for="(item , index) in list" :key="index">
      <li>
        {{item.serial}}---
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="serial" />
    <input type="button" value="点击添加" @click="getserial" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { serial: 1 },
        { serial: 2 },
        { serial: 3 },
        { serial: 4 },
        { serial: 5 }
      ],
      serial: ""
    };
  },
  methods: {
    getserial() {
      this.list.push({
        serial: this.serial
      });
      this.serial = "";
    },
    //通过索引删除数组
    remove(index) {
      //splice 操作数组的方法
      this.list.splice(index, 1);
    }
  }
};
</script>
 
<style>
</style>

html:

<template>
  <el-main>
    <el-col :span="24" class="warp-main" v-loading="">
      <el-form :inline="true" class="demo-form-inline" v-for="(item, i) in FormArr" :key="i">
        <el-form-item label="样例">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
        <el-button type="primary" @click="Delete(item.index)">删除</el-button>
      </el-form>
      <el-button type="primary" @click="AddForm">增加更多</el-button>
    </el-col>
  </el-main>
</template>

逻辑:

<script>
export default {
  data () {
    return {
      FormArr: [
        {
          index: 0,
          value: ''
        }
      ]
    }
  },
  methods: {
    AddForm () {
      this.FormArr.push({
        index: this.FormArr.length,
        value: ''
      })
      console.log(this.FormArr)
    },
    Delete (index) {
      this.FormArr.splice(index, 1)
      for (let i in this.FormArr) {
        this.FormArr[i].index = i
      }
    }
  }
}
</script>

注释:

1.通过对数组的操作,进行添加和删除;

2.这里应注意index这个索引,用于删除时,知道删的是哪一个值;

3.删完对应的值,要对数组的index这个索引重组,否则再删除时会出错;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue项目实现左滑删除功能(完整代码)

    实现效果 代码如下 html <template> <div> <div class="biggestBox"> <ul> <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 --> <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key=&

  • 详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • vue项目中使用rimraf dev启动时删除dist目录方式

    目录 使用rimraf dev启动时删除dist目录 vue修改dist目录 使用rimraf dev启动时删除dist目录 适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录 webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge =

  • Vue项目WebPack打包删除注释和console

    目录 WebPack打包删除注释和console npm run build打包去掉console和警告 WebPack打包删除注释和console 项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的 领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config.js里添加配置 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件 m

  • vue项目无法删除的问题及解决

    目录 vue项目无法删除 vue新增与删除问题 vue项目无法删除 问题 今天删除本地的vue项目,一直提示“操作无法完成,因为其中的文件夹或文件已在另一个程序组打开,请关闭该文件夹或文件,然后重试”. 但是相关的软件我都关闭了,还是不行.如图 解决 我们ctrl+alt+delete打开任务管理器,点击详细信息,找到node.exe 右击选择结束任务,然后点击结束进程,然后就可以成功删除项目了. vue新增与删除问题 <template>   <div>     <ul v

  • Vue项目报错:parseComponent问题及解决

    目录 Vue项目报错:parseComponent 报错内容 解决步骤 Vue常见错误及解决办法 1.在配置路由并引入组件后 2.在组件中的标签和样式中图片路径出错时 3.在组件中标签没有闭合 4.在使用less定义变量是报错 本地开发环境请求服务器接口跨域的问题 Vue项目报错:parseComponent 报错内容 ERROR  Failed to compile with 1 error                                                    

  • vue项目打包后打开页面空白解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. module.exports = { build: { env: require('./prod.env'), index: path.resolve(__

  • vue项目热更新的坑及解决

    目录 vue项目热更新坑 vue项目热更新慢 查找热更新慢是哪里慢—分析原因 解决办法 vue项目热更新坑 今天在使用vue-cli构造的vue项目时,遇到一个坑. setInterval(() => { console.log('This is one.') }, 10000) 运行后如下: 这时我们修改其中的代码,不刷新网页: setInterval(() => { console.log('This is two.') }, 1000) 结果如下,发现之前的计时函数以久存在,热更新 !=

  • vue项目使用websocket连接问题及解决

    目录 vue使用websocket连接 前景 解决过程 vue2全局使用websocket记录 新建ws模块文件 在main.js中引用ws模块文件 App.vue挂载时再次连接服务器并且接收消息 vue使用websocket连接 前景 公司做一个包含websocket的项目,我用的是vue做的,开始只有一个组件的要求demo,就将websocket的配置直接放在组件方法中,组件挂载时直接初始化ws,但是后续组件增加,开始出现多个websocket链接的情况,是不允许的. 刚开始的做法是将web

  • mui-player自定义底部导航在vue项目中显示不出来的解决

    目录 mui-player自定义底部导航在vue项目中显示不出 效果图 总结 mui-player自定义底部导航在vue项目中显示不出 看了作者的源码和案例等,先上代码: <template> <div class="content-box"> <div class="container"> <div>视频插件 mui-player</div> <div id="mui-player&quo

  • vue项目打包后怎样优雅的解决跨域

    前言 在使用vue.js开发前端项目时,再结合webpack搞起各种依赖.各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable一通配置简直不要太酸爽.还不明所以然的新手们可能还没搞清我说的是什么,就是下面这几行配置: proxyTable: { '/api': { target: 'http://113.113.113.113:5000', //假的接口地址哈 changeOrigin: t

  • 详解Vue项目在其他电脑npm run dev运行报错的解决方法

    一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm

  • 解决vue项目router切换太慢问题

    问题定位: 随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时.然后在第一个页面的destroyed周期里面打印日志,发现destroyed->router切换耗时1.5s左右,这时候定位问题是vue的destroyed周期耗时. destroyed周期耗时: 这时候就考虑destroyed为啥要

  • 解决vue项目 build之后资源文件找不到的问题

    解决静态资源失效的问题 这就需要修改我们的 config 中的 index.js了,默认的build 中的部分是这样的: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublic

随机推荐