Vue.js 严格模式下不允许对一个属性进行多个定义

2024-05-02

再会。

我们正在使用 Vuejs/Vuex/vue-router 构建我们的应用程序https://github.com/vuejs/vue-hackernews-2.0 https://github.com/vuejs/vue-hackernews-2.0

当使用 IE11 构建和查看我们的应用程序时,我们得到一个SCRIPT1046: Multiple definitions of a property not allowed in strict mode它引用了编译的app.[#hash].js文件。我已将重复属性跟踪到组件中的以下内容:

<div class="form-group form-group-list">
    <label aria-labelledby="Shopping preference">Shopping preference</label>
    <ul class="inline">
        <li>
            <label for="users__secondary_signup__gender__female" aria-labelledby="Gender female">
                    <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'FEMALE' }">
                        <input id="users__secondary_signup__gender__female" class="enhance-radio"
                                :checked="selectedGender === 'FEMALE'" name="gender"
                                type="radio" value="FEMALE" v-model="selectedGender">
                    </span> Female
            </label>
        </li>
        <li>
            <label for="users__secondary_signup__gender__male" aria-labelledby="Gender male">
                    <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'MALE' }">
                        <input id="users__secondary_signup__gender__male" class="enhance-radio"
                                :checked="selectedGender === 'MALE'" name="gender"
                                type="radio" value="MALE" v-model="selectedGender">
                    </span> Male
            </label>
        </li>
    </ul>
</div>

编译文件中对这些的唯一引用是:

domProps: {
    checked: "MALE" === t.selectedGender,
    checked: t._q(t.selectedGender, "MALE")
},
and
domProps: {
    checked: "FEMALE" === t.selectedGender,
    checked: t._q(t.selectedGender, "FEMALE")
},

我在编译文件中找不到对象中可能存在重复属性的任何其他位置。有人见过这个吗?我们是否在组件中做错了什么才导致它这样做?

谢谢,非常感谢任何帮助。


您不能同时使用 v-model 和 :checked 。当您添加 v-model="selectedGender" 时,您为它提供了一种根据 selectedGender 的值确定选中状态的方法。这导致它创建了以下代码:

检查:t._q(选择性别,“男性”)

当您还添加 :check="selectedGender === 'FEMALE'" 时,您导致它添加其他方式来设置选中状态:

检查:“女性”=== t.selectedGender,

你不能两者兼得。只需删除 :checked= 即可解决此问题。

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

Vue.js 严格模式下不允许对一个属性进行多个定义 的相关文章

  • 访问 .js 文件中的 Nuxt 插件

    假设我有一个脚本文件 foo js function doStuff how to access store and other plugins here export default doStuff 如果不将调用组件作为参数传递 我如何访
  • Angular cli - 在“deployUrl”选项被弃用后在 webpack 中设置“publicPath”

    我希望在这里得到更多答案 开放问题角度 cli https github com angular angular cli issues 22113以及 从角度 13 开始 它说deployUrl正在被弃用 在我们的项目中 我们定义deplo
  • IE11 元元素破坏 SVG

    我已将 SVG 文件数据直接嵌入到我的 html 中 它在 Chrome 和 Firefox 中显示 但在 IE11 中根本不显示 SVG 的 Pastebin 链接是http pastebin com eZpLXFfD http past
  • 将 Cookie 从 CookieContainer 写入 IE Cookie 存储

    我想从桌面应用程序导航到 Web 应用程序中的页面 没问题 我听到你说 只需使用正确的 URL 启动默认浏览器即可 但是 Web 应用程序使用 ASP NET 表单身份验证 用户不想看到登录页面 因为他们已经在桌面应用程序中使用相同的凭据进
  • 监听 Vue.js 中的自定义事件

    Vue js 非常适合处理浏览器事件 例如click or mousedown 但根本不适用于自定义事件 这是代码 HTML div style display none div div div div div
  • 如何使用 Vue.js 向数组(数据)中的所有对象添加属性?

    背景 我在 data 中有一个数组 其中填充了来自后端的对象 如果 GET 请求检索 6 个对象 这 6 个对象将在数组中更新 Problem 我已经了解需要 vm set 来向对象添加属性 但是如何为数组中的所有对象添加属性呢 我想改变
  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • ELEMENT.style.color 在 IE 中不起作用

    在一个小型 Web 应用程序中 我使用 JavaScript 在文本框中设置一些文本及其颜色 在下面的片段中 el 是我的对象 这段代码在 Firefox Opera 和 Safari 下产生了正确的效果 但在 IE 下却没有这样的运气 我
  • ExpressJS - 提供通用 Nuxt 应用程序和 AngularJS SPA

    我有一个具有以下结构的博客项目 服务器 用 Node Express 编写 管理员 AngularJS SPA public AngularJS SPA 目前 管理部分和公共部分具有相同的域 但管理部分使用不同的子域 这允许我在 Expre
  • 当 Vuejs 中的 props 值发生变化时,DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变
  • 无法在 .tsx 文件中导入 CSS 模块

    我正在使用 typescript 构建基本的 React 应用程序 但无法导入 CSS 文件索引 tsx file 我能够导入索引 css文件如下 import index css this import gives typescript
  • 作为对象访问 vue-i18n 消息

    我想创建一个取决于页面的动态滑块 security signin slide1 Kitten1 slide2 Kitten2 signup slide1 Kitten1 slide2 Kitten2 slide3 Kitten3 问题是我想
  • 在 selenium webdriver 中打开一个新窗口而不是新选项卡

    当在我的应用程序中手动单击链接时 它会在 Chrome 和 IE 中的新选项卡中打开 但是 当我的脚本运行时 该链接会在 IE 中的新窗口而不是新选项卡中打开 相同的脚本在 Chrome 中按预期运行 知道如何摆脱这个吗 更改 IE 的默认
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • 无法使用 webpack 加载 Node 原生插件

    虽然我正在使用vue cli在生成 webpack 配置的示例代码中 没有任何特定于 vue 的内容 我像这样创建示例应用程序 vue init webpack webpack modules example 生成webpack base
  • 如何在create-react-app中注入没有REACT_APP前缀的dotenv变量?

    我有一个项目要从旧版 React 应用程序迁移到标准版create react app一个 未弹出 在遗留项目中 它手动加载 env文件与dotenv and dotenv expand并通过webpack注入DefinePlugin cr
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 如何在 Laravel 5.4 中加载 Vue 组件?

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins
  • 覆盖内网兼容模式IE8

    默认情况下 IE8 强制 Intranet 网站进入兼容模式 我尝试将元标头更改为 IE8 但它不承认元标头 仅使用浏览器设置 有谁知道如何禁用此功能 可以覆盖内网中的兼容模式 对于 IIS 只需将以下代码添加到 web config 中

随机推荐

  • android中textview截断一个字母

    这是我的 Android 设备的屏幕截图 文字是 asd 然而 d 被稍微切断了 这是相关视图
  • 在 Rust 中使用结构体的生命周期的正确方法是什么?

    我想写这样的结构 struct A b B c C struct B c C struct C The B c应该借自A c A gt b B gt c C borrow from c C lt 这是我尝试过的 struct C struc
  • 如何在R中制作渐变颜色填充时间序列图

    How to 填充区域 sp 线下方和上方渐变色 这个例子是在 Inkscape 中绘制的 但我需要垂直渐变 不是水平的 间隔从zero to positive 来自white to red 间隔从zero to negative 来自wh
  • 如何获取 vscode 扩展中的 vscode 主题颜色?

    我想在我的扩展中使用当前 vscode 主题中使用的一些颜色 我如何获得颜色 换句话说 我想在扩展运行时将使用原始颜色的扩展颜色与基本 vscode 窗口相匹配 您可以参考工作台颜色 https code visualstudio com
  • Facebook Stream.publish 带有来自 Base64 的图像附件

    我正在尝试让 facebook 的stream publish 制作一个墙贴 其中包含一些自定义文本和从该网站动态生成的图像 该图像仅以 Base64 形式提供 因为它是由用户在启动发布操作之前绘制的 Facebook 似乎不喜欢 src
  • 如何在半屏上呈现 ViewController

    我有一个UIViewController其中只有一个UIView从底部覆盖了 viewController 的 1 3 像这样 我想在另一个 ViewController 上呈现这个 viewController 它应该从底部动画显示 并且
  • CSS 可见性动画不起作用

    我想在 CSS 可见性属性上制作基于关键帧的动画 我最初在 显示 上尝试过 但发现不支持 显示 上的动画 但支持 可见性 这个想法是让矩形的可见性不断切换 我不想使用 jquery 并且想在 CSS 中实现整个它 以下是我的代码 但它没有给
  • Java Marine API - 寻找 NMEA 数据

    我的最终目标是从 Adafruit Ultimate GPS NMEA 0183 标准 接收纬度和经度 GPS 信息到我的 Java 应用程序 我正在使用 Java Marine API 来执行此操作 然后 当前位置将与时间戳一起写入数据库
  • Ionic 4 键盘覆盖输入字段

    我有一个 Ionic 4 应用程序 其中有一个包含输入的表单 当用户单击输入时 它会打开键盘 但会隐藏内容 而不滚动 有没有办法解决 这是我的代码
  • 如何在iPhone真机上打开数据库sqlite文件?

    我正在通过电缆在我的真实设备中调试应用程序 我有一部 iPhone 6 我想检查我的数据库并使用 sqlite3 操作来查询我的结果 其他问题和教程解释了只能在模拟器中执行此操作 但我使用的是真正的 iPhone 在AppDelegate中
  • MySQL:错误 1215 (HY000):无法添加外键约束

    我读过了数据库系统概念 第六版 西尔伯沙茨 我将在 OS X 上的 MySQL 上实现第 2 章中所示的大学数据库系统 但我在创建表格时遇到了麻烦course 桌子department好像 mysql gt select from depa
  • Swing JTable:当行可见或滚动到底部时发生事件?

    我正在寻找一种方法 以便在 JTable 滚动时收到通知 以便特定行变得可见 或者在表底部滚动到视图中时失败 理想情况下 这应该在不轮询的情况下完成 而是通过一些事件触发来完成 有任何想法吗 Add a ChangeListener到滚动窗
  • Jquery 手风琴默认不折叠

    我正在使用 bootstrap 提供的折叠插件 这是一个 jquery 简单插件 但是它默认折叠 如何修改以使折叠项默认隐藏 只有当我按下标题时 该项目才会折叠并显示 谢谢 插件的文档 只有几行 所以只需要一分钟 http twitter
  • 从命令行更新具有固定依赖项的 npm 包

    我有一个带有更新的固定版本的 npm 包 package json 摘录示例 devDependencies someFixedVersionPackage 1 0 0 1 1 0 is latest anotherFixedVersion
  • mean.io - 错误:“请求实体太大”。如何在meanio模块之外增加bodyParser限制?

    我在mean io 应用程序中收到以下错误 Error request entity too large 为了解决这个问题 我在以下位置增加了meanio模块中的bodyParser限制 node modules meanio lib co
  • Selenium:从文本框中删除内容

    通过硒 如何从文本框中删除内容 我必须使用 selenium 命令从文本框中删除最后 2 个字符 例如ABCD 到AB 尝试这个 selenium type text box object ABCD selenium typeKeys te
  • 带有无序列表的 Flexbox

    我正在尝试学习 Flexbox 我真的很喜欢它 我正在尝试 玩动态宽度 当我这样做时div它有效 如果我尝试这样做li 它也不起作用 我的代码已上线codepen http codepen io jrock2004 pen pjvZJd d
  • 如何展开和折叠列表视图中的项目

    我对安卓还很陌生 我想实现一个列表视图 它包含一些列表项 当单击它们时 它们应该展开以显示更多信息 但我找不到办法做到这一点 这是我的activity main xml
  • jtree 编程式多选

    是否能够以编程方式选择 JTree 中的多个树节点 我已经设置了多选模式tree getSelectionModel setSelectionMode TreeSelectionModel DISCONTIGUOUS TREE SELECT
  • Vue.js 严格模式下不允许对一个属性进行多个定义

    再会 我们正在使用 Vuejs Vuex vue router 构建我们的应用程序https github com vuejs vue hackernews 2 0 https github com vuejs vue hackernews