Как обновить mounted hook vue?

Question

[Федор Ашифин]

Пишу простое приложение типа Trello по курсу на youtube. На главной несколько досок. Там просто, vuex пока не использую, делаю запросы прямо в компонентах, понимаю что не правильно, но так показывает чел в курсе.
Первая станица с всеми досками:

<template>
  <div class="desks">
    <div class="row">
      <div class="col-lg-4"
      v-for="desk in desks"
      >
        <div class="card mt-3 mb-3" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">{{desk.name}}</h5>

          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">An item</li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
          </ul>
          <div class="card-body">
            <router-link :to="{name: 'showdesk', params:{desk_id:desk.id}}" class="card-link">
              Править доску
            </router-link>
            <a href="#" class="card-link">Другая ссылка</a>
          </div>
        </div>
      </div>
    </div>
    <div class="alert alert-danger" role="alert" v-if="errored">
      Ошибка загрузки данных!
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div class="spinner-border" role="status" v-if="loading">
        <span class="visually-hidden">Загрузка...</span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return{
        desks: [],
        errored: false,
        loading: true
      }
    },
    mounted() {
      axios
        .get('api/v1/desks')
        .then(response => {
          this.desks = response.data.data
        })
        .catch(error =>{
          console.log(error)
          this.errored = true
        })
        .finally(()=>{
          this.loading = false
        })

    }
  }
</script>

<style scoped>

</style>

</script>

На всякий случай вот маршрут из роута:

path: '/desk/:desk_id',
    name: 'showdesk',
    component: ShowDesk,
    props: true

И наконец сама станица где редактируем название доски:

<template>
  <div >
    <div class="form-group mb-3">
      <input type="text" @blur="SaveName" class="form-control" v-model="name" >
    </div>
    <div class="alert alert-danger" role="alert" v-if="errored">
      Ошибка загрузки данных!
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div class="spinner-border" role="status" v-if="loading">
        <span class="visually-hidden">Загрузка...</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:[
      'desk_id'
    ],
    data(){
      return {
        name: null,
        errored: false,
        loading: true
        
      }
    },
    methods:{
      SaveName(){
        axios
          .post('/api/v1/desks/' + this.desk_id,{
            _method: 'PUT',
            name: this.name
        })
          .then(response => {
            console.log('отравляем' + this.desk_id)
          })
          .catch(error =>{
            console.log(error)
            this.errored = true
          })
          .finally(()=>{
            this.loading = false
          })
      }
    },
    mounted() {
      axios
        .get('/api/v1/desks/' + this.desk_id)
        .then(response => {
          this.name = response.data.data.name
          console.log(this.desk_id)
        })
        .catch(error =>{
          console.log(error)
          this.errored = true
        })
        .finally(()=>{
          this.loading = false
        })

    }
  }
</script>

Проблема в том, что когда я первый раз переходу например на вторую доску то все норм работает, но когда я перехожу на другую например на третью мне все равно показывается название второй доски.
То есть mounted отдает данные из предыдущего запроса, сама перезапись идет нормально, но когда перехожу на главную там старое название, для того, чтоб отобразилось новое нужно перегружать страницу.

Answer 1

[Aetae]

Нет, не надо обновлять mounted. Суть в том, что vue весь оптимизирован, и не перемонтирует компонент если точно такой же оказывается на том же месте, просто меняет соответствующие props.

В твоём случае вместо того чтобы делать запрос в mounted, положи его также как SaveName(hint: в js принят camelCase, PascalCase только для классов) в methods и вызывает оттуда по watch desk_id (immediate: true - чтоб при первой загрузке тож запустилось).

Comments

[Федор Ашифин]

Спасибо! теперь знаю в какую сторону копать))
Сделать новую функцию и запускать ее через наблюдатель watch

Answer 2

[Федор Ашифин]

Может кому-то пригодится убрал соединение из mounted
и добавил

watch:{
      desk_id:function () {
        axios
          .get('/api/v1/desks/' + this.desk_id)
          .then(response => {
            this.name = response.data.data.name
            console.log('изеняем' + this.desk_id)
          })
          .catch(error =>{
            console.log(error)
            this.errored = true
          })
          .finally(()=>{
            this.loading = false
          })
      }
    },