两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值
Posted
技术标签:
【中文标题】两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值【英文标题】：Same Vue.js component in two browser tabs make <select> mirror its selected values 【发布时间】：2022-01-18 01:42:14 【问题描述】：我有一个 Vue 应用程序，使用 vue-router 和一些在 x-templates 中呈现的组件。在其中一个标记模板中，我有一个
我无法解释。我错过了什么？我是否需要维护会话以避免这种情况？如果有，怎么做？
编辑：我现在很明显 所有 对象的行为相同，并且在会话之间镜像。这必须是设计使然，但是我该如何将其与 Vue.js 中的良好模式分开？
App.js
Vue.use(VueRouter)
const router = new VueRouter(
mode: 'history',
base: "/",
routes: [
path: '/',
name: "start",
component: Start,
,
path: '/character/view/:guid',
name: "character.view",
component: ViewCharacter,
]
)
new Vue(
router,
el: '#app',
data: function()
return
baseUri: "/"
,
computed:
)
<html>
....
<script type="text/x-template" id="template-character-sheet">
<div>
<select>
<option>1</option>
<option>2</option>
</select>
</script>
...
<script src="/components/ViewCharacter.js"></script>
<script src="/components/App.js"></script>
...
</html>
ViewCharacter.js（片段）
const ViewCharacter =
template: "#template-character-sheet",
components:
"navigation": Navigation
,
data: function()
return
properties: values,
.......
,
computed:
current_stability: function()
return this.rules.stability_levels.filter(o => o.level == this.character.stability)[0];
,
.......
,
.......
【问题讨论】：
【参考方案1】：[未经测试]
我认为您的问题是两个<select> 中的:key 相同，请尝试添加生成的密钥来解决问题。
文档：https://v3.vuejs.org/guide/migration/key-attribute.html
【讨论】：
嗯，是的——我的意思是，它们不是单独的对象——它们是应用程序中的同一个对象，只是显示了两次——每次都在不同的浏览器选项卡中。所以，我什至不能使用用户 ID 作为键，因为用户 ID 在两个浏览器选项卡中都是相同的。【参考方案2】：大脑崩溃。这是我忘记了浏览器同步在工具链中运行以提供内容。切换到服务，问题明显消失了。
【讨论】：
以上是关于两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值的主要内容，如果未能解决你的问题，请参考以下文章