Vue компонент работает как положено только после горячей перезагрузки - PullRequest
Новая
       23

Vue компонент работает как положено только после горячей перезагрузки

0 голосов
/ 09 марта 2020

Погуглил несколько часов, но не смог найти решение (плюс объяснение).

У меня есть Vue выберите компонент, связанный с датируемыми: 

        <select @change="statusChanged()" v-model="active" name="FilterStatus" id="FilterStatus" class="form-control selectp"  data-placeholder="FilterStatus" tabindex="2">
          <option value="all">All</option>
          <option :value="true">Active</option>
          <option :value="false">Inactive</option>
        </select>

С функцией изменения "statusChanged": 

data() {
  return {
    active: 'all'
  }
},
methods: {
    ...
    statusChanged(){
        if (this.active === true) {
          $("#CustomerTable")
            .DataTable()
            .columns( 1 )
            .search( true )
            .draw();
        } else if (this.active === false) {
         ....
    }
  },

Моя цель - просто изменить статус, выбрав в раскрывающемся списке элемент. Основная проблема в том, что он работает только после горячей перезагрузки, а не только на refre sh страницы! Например:

шаг 1: я загружаю страницу в первый раз, шаг 2: раскрывающийся список не работает, и значение «активно» не меняется, шаг 3: я изменяю код в своем редакторе (независимо от того, что), сохраняю это -> горячая перезагрузка запускается и после выбора опций работает, и Datatable обновляется с примененными фильтрами!

Почему так? Есть идеи или предложения как это исправить?

1 Ответ

0 голосов
/ 09 марта 2020

Я сделал это в новом vue проекте и работал правильно, возможно, у вас есть ошибка, из-за которой ваша активная переменная не работает (Проверьте консоль браузера) 

<template>
  <div id="app">
    <select @change="statusChanged()" v-model="active" name="FilterStatus" id="FilterStatus" class="form-control selectp"  data-placeholder="FilterStatus" tabindex="2">
      <option value="all">All</option>
      <option :value="true">Active</option>
      <option :value="false">Inactive</option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      active: 'all'
    }
  },
  methods: {
    statusChanged(){
        console.log(this.active);
    }
  }
}
</script>
...