Vuejs: Принудительно не использовать один и тот же компонент при навигации? - PullRequest
Новая
       2

Vuejs: Принудительно не использовать один и тот же компонент при навигации?

0 голосов
/ 02 апреля 2020

Я использую Vuejs в своем проекте, и он отлично работает.

Но сейчас я столкнулся с проблемой.

У меня есть компонент UserForm, который я использую для чтение пользователей (имя маршрута: UserFormView) и их создание (имя маршрута: UserFormCreate). Когда я в форме пользователя, у меня есть кнопка Create Another, которая должна открыть UserForm для создания нового пользователя. Дело в том, что, поскольку это один и тот же компонент, кажется, что он используется повторно, и мне нужно сбросить все данные вручную, чтобы получить чистую форму.

Я бы хотел, чтобы она уничтожила текущую форму и перемонтировала вместо этого новый, чтобы мне не пришлось выполнять какой-либо ручной сброс данных ...

Как мне этого добиться?

Я не нашел способа сделать это даже в документация (возможно мое исследование было дерьмом) или в других сообщениях.

Мое приложение. vue: 

<template>
  <v-app>
    <app-header @toggle-sidebar-miniVariant="toggleSidebarMiniVariant()"/>
    <app-sidebar ref="sidebar"/>
    <app-footer/>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

Затем два моих маршрута для пользовательской формы: 

{ path: '/user/create', name: 'UserFormCreate', component: UserForm, props: true },
{ path: '/user/:userId', name: 'UserFormView', component: UserForm, props: true },

Вы видите, что я использую один и тот же компонент. Поэтому, когда я использую UserFormView, я хочу получить тот же компонент, но чистый, чтобы иметь возможность создать новый. 

<v-btn v-if="!editing && user !== undefined" @click="createAnother()">
  <v-icon small class="mr-1">mdi-plus</v-icon>
  Create Another
</v-btn>

В настоящее время, чтобы заставить его работать, я делаю это: 

createAnother () {
  this.resetDefaultData()
  this.$router.push({ name: 'UserFormCreate', params: { editing: true } })
},

resetDefaultData () {
  Object.assign(this.$data, this.setDefaultData())
},

setDefaultData () {
  return {
    user: undefined,
    groupsUserHasNot: [],
    form: {
      username: '',
      password: '',
      firstName: '',
      lastName: '',
      isActive: true
    },
    showPassword: false,
    selectedGroups: []
  }
},

и мои исходные данные (): 

  data () {
    return this.setDefaultData()
  },

Заранее спасибо.

1 Ответ

0 голосов
/ 03 апреля 2020

Следуя комментариям, предоставленным @ S.Visser @Terry и @ A.Lau, я изменил «архитектуру» своих компонентов.

В итоге у меня появилось 2 новых компонента UserFormCreate и UserFormRead ( которые имеют каждый выделенный маршрут), которые оба включают UserForm. С последним маршрутом не связан маршрут, но вместо этого он используется в предыдущем 2.

Он сохраняет принцип DRY, поскольку мой UserForm записывается только один раз. И я могу вызывать его разными реквизитами, чтобы он соответствовал моим потребностям.

Так как это было основной задачей, мне не нужно вызывать forceUpdate () или что-либо еще, чтобы получить результат, которого я тоже хотел достичь .

Вместо этого, когда я нажимаю кнопку Create Another, он просто вызывает URL-адрес UserFormCreate и, таким образом, он создает новый UserForm.

UserFormRead: 

<template>
  <v-container fluid>
    <user-form :userId="userId"/>
  </v-container>
</template>

<script>
import UserForm from './UserForm'
export default {
  name: 'UserFormRead',
  components: {
    UserForm
  },
  props: {
    userId: { type: Number, default: null }
  }
}
</script>

UserFormCreate: 

<template>
  <v-container fluid>
    <user-form :editing="true"/>
  </v-container>
</template>

<script>
import UserForm from './UserForm'
export default {
  name: 'UserFormCreate',
  components: {
    UserForm
  }
}
</script>

2 связанных маршрута: 

{ path: '/user/create', name: 'UserFormCreate', component: UserFormCreate, props: true },
{ path: '/user/:userId', name: 'UserFormRead', component: UserFormRead, props: true },

Я не покажу UserForm здесь, потому что он очень длинный, и нет причин делать это, так как это не главное.

...