如何在 Vue.js 中解除数组副本的绑定

2023-12-28

我正在尝试将一个数组复制到另一个数组并像新数组一样使用它,而不对旧数组进行任何更改:

<div id="app">
    <div class="form-group">
       <label>Test input</label>
       <input v-model="testArray[0].name" type="text" class="form-control" placeholder="Input">
    </div>
    <br>
    <pre>testArray: {{ testArray[0] | json}}</pre>
    <pre>templateArray: {{ templateArray[0] | json  }}</pre>
new Vue({
  el: '#app',
  data: {
      testArray: [],
      templateArray: [{name: "TEST"},], 
  },
  ready: function() {
      this.testArray = this.templateArray.slice(0);
    },
});

问题是,然后我正在更新新数组“testArray”,我还更改旧数组“templateArray”。

正在运行的脚本:https://jsfiddle.net/4po1cpkp/7/ https://jsfiddle.net/4po1cpkp/7/

有没有办法根据数组模板创建新数组而不直接将其绑定到模板?


正如 Vue.js 文档所述:

在底层,Vue.js 附加了一个隐藏属性__ob__ and 递归地将对象的可枚举属性转换为 getter 和设置器以启用依赖项收集。具有以下键的属性 以 $ 或 _ 开头的将被跳过。

您可以存储以下划线符号开头的名称的模板数组:

  data: {
      testArray: [],
      _templateArray: [{ name: "TEST" }]
  },
  ready: function() {
      this.testArray = this.$data._templateArray;
  }

或者如果您需要它作为 Vue.js 对象:

this.testArray = JSON.parse(JSON.stringify(this.templateArray));

对于大数据来说,第二种情况可能会很慢。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Vue.js 中解除数组副本的绑定 的相关文章

  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • 使用 for 循环 Python 为数组赋值

    我正在尝试将字符串的值分配给不同的数组索引 但我收到一个名为 列表分配超出范围 的错误 uuidVal distVal uuidArray distArray for i in range len returnedList for beac
  • 如何在 JS Rails 响应中包含 HTML?

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota
  • 检查 bash 中是否存在关联数组元素

    在 bash 脚本中 我在变量中有一个区域设置 如下所示 locale fr ma 我也有一个像这样的关联数组 declare A new loc map new loc fr ma en ma new loc el gr en gr ne
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • 是否有一种算法可以在线性时间内计算数组反转?

    我知道有多少倒转 en wikipedia org wiki Inversion 28discrete mathematics 29 in an n 元素数组可以在 O n log n 操作使用增强型归并排序 http www geeksf
  • 当条件评估为 true 时获取元素(扩展 ElementArrayFinder)

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 如何复制 ArrayIterator 以保留其当前迭代位置?

    因为这似乎是我必须做的才能达到这种效果 arr a gt first b gt second iter new ArrayIterator arr Do a bunch of iterations iter gt next new iter
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • Python selenium“about:blank&utm_content=firstrun”错误

    我一直在努力弄清楚我的代码发生了什么 但我无能为力 每当我运行我的程序时 我都会收到下图中的错误 我正在使用 python 3 4 4 和 selenium 的最新版本 Windows 10 from selenium import web
  • Django 按日期排序(日)

    我想先按天排序模型 然后按分数排序 这意味着我希望看到每天得分最高的文章 class Article models Model date modified models DateTimeField blank True null True
  • 如何在 Swift 中创建范围?

    在 Objective c 中 我们使用 NSRange 创建范围 NSRange range 那么如何在 Swift 中创建范围呢 更新为 Swift 4 Swift 范围比NSRange 并且它们在 Swift 3 中并没有变得更容易
  • Jetpack Compose 线圈预载

    我想将图像加载到启动屏幕上 以便我可以使用线圈将请求结果设置到其他屏幕上的背景 但我无法在线圈中完全实现这一点 如何将线圈请求的结果保存到 Cahce 并在其他屏幕上使用该结果 启动画面 val imageLoader ImageLoade
  • HTML 电子邮件的图像地图、Safari 和 Gmail 出现问题

    我有一个奇怪的问题 我正在发送一封 html 电子邮件 其中包含一些图像映射链接 我的问题与 Gmail 和 Safari 相关 奇怪的是 从 Gmail 及其图像映射 查看的电子邮件在 Firefox IE 和 Chrome 中运行良好
  • Swing 多列组合框

    目前 我正在寻找一个可以放置在我的 Java Swing 应用程序中的多列组合框组件 目前 我使用组合框作为用户键入时的自动完成下拉列表 是否有任何可用的 GUI 组件 使我能够拥有以下内容 多列 正如您所看到的 下拉列表中有 3 列 而不
  • Vim 错误 E492 - 不是编辑器命令:PluginInstall

    我正在尝试在我的 Macvim 上安装 Vundle 我遵循以下link https github com gmarik Vundle vim获取 Vundle 我还配置了我的 vimrc 文件 但是当我尝试 PluginInstall 时
  • React 中的内联样式在打印模式下不起作用

    div 所以 color index 是十六进制颜色 例如 ffffff 我可以在网络浏览器中看到正确的颜色 但由于某种原因 这在打印预览中不起作用 我尝试添加 蓝色 而不是颜色 索引 这在网络浏览器中有效 但它没有更新打印预览 我认为内联
  • Android GC - LogCat 始终显示 GC 活动

    当我运行程序时 logcat 显示大量 GC 活动 like GC freed 10324 objects 510376 bytes in 103 ms GC freed 10324 objects 510376 bytes in 103
  • 通过 wine metaeditor.exe 通过命令行编译 MQL4

    我试图达到可以通过命令行进行编译 语法检查的程度 这样我就可以避免使用元编辑器进行代码管理 我正在使用这个命令 也尝试使用 s 和 log wine metaeditor exe compile MQL4 Experts MACD Samp
  • 无法在跨 Windows 10 版本的 NavigationView 项目模板中实现相同的行为

    我对尝试在 UWP 应用程序中实现相同的视觉行为感到非常沮丧 这是我的问题 我正在使用 NavigationView 并且想从 ViewModel 提供 NavigationViewItem 我还想提供标头 因此我创建一个 ICollect
  • 如何转义列别名中的方括号? [复制]

    这个问题在这里已经有答案了 以下产生错误 SELECT 1 AS dada daa Msg 105 第 15 级 状态 1 第 190 行 字符串 dada daa 消息 102 第 15 级 状态 1 第 190 行 dada daa 附
  • Rails 加密/解密

    我需要在我的 Rails 应用程序中进行加密和解密 我尝试使用 ezcrypto 但每当我解密时都会收到此错误 OpenSSL Cipher CipherError in ProfilesController show wrong fina
  • 克隆 github 项目的部分内容[重复]

    这个问题在这里已经有答案了 可能的重复 有没有办法只克隆 git 存储库子目录 https stackoverflow com questions 600079 is there any way to clone a git reposit
  • 给定起始坐标、方位和距离,查找目的地坐标

    I m looking at the formula listed here http www movable type co uk scripts latlong html http www movable type co uk scri
  • JSON 编码和解码

    我有一个像这样的数组 Array utm source gt website utm medium gt fbshare utm campaign gt camp1 test cat gt red test sub gt Category
  • 如何在 rake 任务中使用“gets”?

    每当我尝试在 rake 任务中使用函数 gets 时 都会收到错误 有办法让它发挥作用吗 错误提示 没有这样的文件或目录 rake 任务名称 问题是Kernel gets http ruby doc org core 2 0 Kernel
  • 尝试 lint 我的 gitlab-ci.yml(版本 13.8)时出现 401 Unauthorized

    从周一开始 我无法使用 gitlab 的 lint CI API 该 API 已记录在此处https docs gitlab com ee api lint html validate the ci yaml configuration h
  • 如何在 Bash 脚本中将字符串作为 AWK 中的参数传递

    我有一个要过滤的文本文件 使用 awk 文本文件如下所示 foo 1 bar 2 bar 0 3 bar 100 qux 1033 我想在 bash 脚本中使用 awk 过滤这些文件 bin bash input file input my
  • 如何在 Vue.js 中解除数组副本的绑定

    我正在尝试将一个数组复制到另一个数组并像新数组一样使用它 而不对旧数组进行任何更改 div div class form group div div