为什么 v-model 不能与数组和 v-for 循环一起使用?

2024-02-04

我有一个自定义选择组件,它适用于一个简单的变量,但与 v-for 一起使用时它将不起作用:

https://jsfiddle.net/7gjkbhy3/19/ https://jsfiddle.net/7gjkbhy3/19/

<select2 v-for="item, index in samples" v-model="item" ></select2>
data : { samples : [0, 0, 0]}

这有效:

<select2 v-model="sample"></select2>
data : { sample : 0}  

我在这里缺少什么?


v-model and v-for不能很好地配合,如果v-model用于带有原始值的迭代别名。

Vue 警告:

你正在绑定v-model直接到一个v-for迭代别名。这会 无法修改 v-for 源数组,因为写入 别名就像修改函数局部变量。考虑使用 对象数组并在对象属性上使用 v-model。

因此,使用每个对象都有一个用于选择值的属性的对象数组可以解决该问题:

工作示例 https://jsfiddle.net/7gjkbhy3/21/.

<select2 v-for="item, index in samples" v-model="item.value" ></select2>
new Vue({
     el: '#app',
     data: {
         sample: 0,
         samples : [{ value: 0 }, { value: 0 }, { value: 0 }]
     }
 })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 v-model 不能与数组和 v-for 循环一起使用? 的相关文章

随机推荐

  • .htaccess http 到 https 重定向 [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我目前正在使用以下 htaccess 将我的网站重定向到 https 和 www 如果尚未使用 RewriteEngine On RewriteCon
  • 如何在 XMLHttpRequest 中捕获 Chrome 错误 net::ERR_FILE_NOT_FOUND?

    我想创建 chrome 扩展 它将能够读取本地文件并使用其中编写的代码 我的简单代码是 const readFile filePath gt return new Promise function resolve reject const
  • 服务如何生成和使用公共和秘密 API 密钥?

    Google Stripe 和许多其他公司都有公共 API 密钥和秘密 API 密钥 生成随机字符串很容易 但我的问题是 如何生成公钥和私钥 存储它们并正确使用它们 公共 API 密钥用于告知用户是谁 秘密用于确认用户的身份 我的流程如下
  • Typescript - React 组件中的“找不到名称”错误

    我正在将现有的 React 代码迁移到 TypeScript 并且遇到了很多问题 其中之一是当我创建我的代码时出现很多 找不到名称 错误 js files ts files 这是有问题的代码 import React from react
  • Windows 7 Websocket PlatformNotSupportedException

    我正在使用 Microsoft Azure Devices Client NuGet 包开发一个应用程序 在 Windows 10 上一切都运行良好 但在 Win7 机器上测试时我遇到了这个聚合异常 System PlatformNotSu
  • 如何在 Homebrew 中符号链接 python?

    由于某种原因 当我运行 brew link python 时 没有符号链接 我收到以下错误 我按照它告诉我的去做 但它不起作用 我已经尝试按照它告诉我的去做 但也许我没有把公式名称放在正确的位置 另外 当我执行 which python 时
  • 如何在 SQL Server 中循环插入多条数据?使用 Node JS 乏味

    我有一个 Node JS 项目 它从数组中获取数据data2 使用此数据创建一个对象myObject使用来自 API 的数据获取let url https 然后将其保存到 SQL Server 中的数据库中 我遇到的问题是我遵循MS Doc
  • 在响应中返回 HttpStatusCode

    有没有一种简单的方法可以为我的 api 返回 HttpStatusCode 我找到了一种稍微更详细的方法来做到这一点 return Response AsJson new object HttpStatusCode NoContent 我已
  • 在ant脚本中连接xml文件

    我是 Ant 脚本的新手 我正在寻找如何将文件夹中的所有 xml 文件连接到 ant 脚本中的单个 xml 文件中 在我的项目中 将在文件夹中动态生成 n 个 xml 文件 例如 server1 xml manager xml server
  • 在 iOS 9 和 10 中支持 NSManagedObject fetchRequest() 类方法

    iOS 10 引入了新的类级别fetchRequest 中的方法NSManagedObject 和许多其他开发人员一样 我在上面创建了自己的扩展NSManagedObject其中有一个fetchRequest 方法 当我尝试构建支持 iOS
  • 对数字进行排序 Objective C

    我有一个字符串数组 我使用该方法对其进行排序 TableViewPopoverList sortUsingSelector selector localizedCaseInsensitiveCompare 这些字符串的第一部分是一个数字 但
  • 执行transact-sql语句或批处理时发生异常

    我不断收到错误消息 执行transact sql语句或批处理时发生异常 当尝试在 SQL Server Management Studio 2016 中执行任何操作时 当我尝试创建或编辑登录名 尝试创建新数据库时 基本上当我执行任何操作时
  • 内容从高度为 100% 的 div 溢出

    当我在 Chrome Firefox 或 IE11 中查看此页面时 我注意到将窗口水平调整到最小宽度会导致文本溢出页面底部的白色背景 div div设置了100 的高度 那不是应该继续匹配页面的高度吗 看起来 100 只匹配窗口的高度 但是
  • 为什么 php 接口中的关键词是abstract和void?

    查看 php 手册站点上的 SplSubject 接口并注意到 SplSubject Methods abstract public void attach SplObserver observer abstract public void
  • JRXML 中的多个页面使用 iReport 进行多页报告

    我只是想知道iReport JRXML是否支持多页报表 如果有的话 可以给一些参考样品吗 我并不是要求一份随着数据增长而增长的报告 我有一份静态报告 其中包含多个页面需要处理 每个页面都有不同的页眉 页脚和内容 只是他们需要成为一个单一的一
  • 如何在 Asp.Net Core 6 中从 Secrets.json 获取 ConnectionString?

    我是 Asp Net Core 和 EF 的新手 我正在从数据库端开发一个简单的 CRUD 使用Secrets json文件来隐藏我的连接字符串凭据 但我不知道如何使用 AddDbContext 引用该文件 到目前为止我的代码 public
  • 如何在 Jetpack Compose 中减慢 AnimateScrollToItem 的速度?

    我有一个惰性列表 单击按钮时我将动画滚动到项目 onClick scope launch lazyListState animateScrollToItem selectedIndex 为什么 animateScrollToItem 这么快
  • 使用 pdfkit for python 生成目录

    问题摘要 我无法让目录生成器在 Python 的 pdfkit 中工作 我尝试过的 传递参数toc 我当前的代码 toc xsl style sheet toc xsl pdfkit from file book html filename
  • 从矩阵中提取一系列连续向量

    我有一个大矩阵 为了简化起见 gt mat matrix c 1 50 ncol 5 gt mat 1 2 3 4 5 1 1 11 21 31 41 2 2 12 22 32 42 3 3 13 23 33 43 4 4 14 24 34
  • 为什么 v-model 不能与数组和 v-for 循环一起使用?

    我有一个自定义选择组件 它适用于一个简单的变量 但与 v for 一起使用时它将不起作用 https jsfiddle net 7gjkbhy3 19 https jsfiddle net 7gjkbhy3 19