Я использую vue и официальный роутер. Мое приложение имеет несколько представлений, а одно представление имеет форму с некоторыми входными данными. Теперь я ищу решение для переключения между представлениями без потери входных данных / перерисовки представления. Дополнительная кнопка сохранения в форме не является опцией.
Возможно, моя проблема близка к тому, как работает v-if и v-show: https://vuejs.org/v2/guide/conditional.html#v -if-vs-v-show
Я строю пример на основе маршрутизатора vue: https://jsfiddle.net/okuc64d2/6/
const Foo = {
data: function () {
return {
text: "abc"
}
},
template: '<div>VIEW A: <input v-model="text" placeholder="edit me"></div>'
}
const Bar = {
data: function () {
return {
text: "123"
}
},
template: '<div>VIEW B: <input v-model="text" placeholder="edit me"></div>'
}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
.router-link-active {
color: red;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<ul>
<li>Go to Foo</li>
<li>Change input</li>
<li>Go to Bar</li>
<li>Go back to Foo</li>
<li>Input is resetted</li>
</ul>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>