我有一个 Vue 应用程序，使用 vue-router 和一些在 x-template 中渲染的组件。在这些标记模板之一中，我有一个 < select > 对象。当我在同一浏览器会话中的两个单独的选项卡中打开此页面时，一个选项卡中更改的选择会镜像到另一个选项卡中。我首先以为是数据和方法，但后来我添加了一个完全普通的 < select > ，其中有一些 < option > ，没有绑定、数据、事件处理程序或任何东西 - 而且它的行为是一样的！当我在一个选项卡中选择一个选项时，它会在另一个选项卡中选择相同的选项。对于同一应用程序中的其他 <select> 对象也是如此。
我无法解释。我缺少什么？我是否需要保持会话以避免这种情况？如果是这样，怎么办？
编辑：现在对我来说很明显，所有对象的行为都相同，并且在会话之间进行镜像。这一定是设计使然，但我该如何将它与 Vue.js 中的良好模式分开呢？
应用程序.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];
},
.......
},
.......
}
[未经测试]
:key我认为您的问题在您的两个中都有相同的问题<select>，请尝试添加生成的密钥来解决问题。
文档：https://v3-migration.vuejs.org/writing-changes/key-attribute.html
| 归档时间： |
|
| 查看次数： |
972 次 |
| 最近记录： |