У меня есть приложение Vue, использующее vue-router и несколько компонентов, отображаемых в x-templates. В одном из этих шаблонов разметки у меня есть объект <select>. Когда я открываю эту страницу на двух отдельных вкладках в одном и том же сеансе браузера, измененный выбор на одной вкладке отражается на другой вкладке. Сначала я подумал, что дело в данных и методах, но потом я добавил совершенно ванильный <select> с несколькими <option> в нем, без привязок, данных, обработчиков событий или чего-то еще — и он ведет себя так же! Когда я выбираю параметр на одной вкладке, он выбирает то же самое на другой. То же самое для других объектов <select> в том же приложении.
Я не могу это объяснить. Что мне не хватает? Нужно ли поддерживать сеансы, чтобы избежать этого? Если да, то как?
Изменить: теперь мне очевидно, что все объекты ведут себя одинаково и отражаются между сеансами. Это должно быть по дизайну, но как мне сделать, чтобы отделить его с помощью хорошего шаблона в 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
<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.vuejs.org/guide/migration/key-attribute.html.
Комментариев нет:
Отправить комментарий