Вычисляемые свойства не запускаются, кроме случаев, когда я открываю инструменты Vue dev

У меня есть целевая страница, внутри я использую v-for для итерации 3 option div, каждый div получает свои соответствующие реквизиты от посадочного компонента, одна пропуска, которую я передаю, является name опорой, когда вы нажимаете на выбранный div, он генерирует событие с этим свойство, а также перенаправляет на компонент main, который заполняется в зависимости от имени.

//option div
export default {
  props:['name'],
  data(){
    return {

      }
    }
  },
 methods: {
   selectName() {
     let name = this.name
     this.$eventHub.$emit("select-name", name);
   }

В компоненте main я слушаю событие при монтировании и использую эту информацию в заголовке компонента:

mounted: function() { 
  this.$eventHub.$on("select-name", name => { 
    this.$store.dispatch("information/getInfoByName", name); 
    this.title = name
} })

Я хочу добавить проверку, если пользователь переходит непосредственно к https://example.com/main, не выбирая сначала option div, я хочу, чтобы он вернулся на целевую страницу:

data() {
 name: null
},
computed:{
  nameValidation(){
    if(this.name == null) {
     swal({
     text: "Please select a name first",
     icon: "warning",
     buttons: false,
     timer: 1500
     });

     setTimeout(function () {
       document.location.href = '/landing'
     }, 1500);
   }

Он работает ... когда у меня открыт Vue devtools, но когда я его закрываю, он не работает. Он каким-то образом выполняет вычисленное свойство. Я пробовал использовать его как метод и вызывать его в заголовке моей страницы <h1>{{nameValidation}}<h1>, но он всегда проверяет this.name как null, даже если вы выбираете вариант, я предполагаю, что это связано с отправкой, которую я выполняю при монтировании main, у меня вопрос: почему вычисление работает только с инструментами разработчика?


vue.js computed-properties
person ahzep    schedule 24.08.2019    source источник
comment
Вы используете Vue Router?   -  person Andrew Vasilchuk    schedule 24.08.2019
comment
Да, и посадка, и главная - разные пути.   -  person ahzep    schedule 24.08.2019
comment
Как вы переходите name на главную страницу?   -  person Andrew Vasilchuk    schedule 24.08.2019
comment
с vuex ...mapGetters({ getClusterInfo: "getClusterInfo/getClusterInfo" }),   -  person ahzep    schedule 24.08.2019
comment
Не могли бы вы предоставить код, который устанавливает свойство name в ваших данных? В приведенном выше коде создается впечатление, что имя просто никогда не меняется на какое-либо значение. (Другая проблема заключается в том, что вам действительно следует обрабатывать эту логику не в вычисляемом свойстве, а в ловушке жизненного цикла)   -  person MarcRo    schedule 25.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте сделать это в ловушке mounted компонента страницы, например:

...
props: {
  name: {
    type: String,
    required: true
  }
},
mounted() {
  if (this.name == null) {
    swal({
      text: 'Please select a name first',
      icon: 'warning',
      buttons: false,
      timer: 1500,
    })

    setTimeout(() => {
      document.location.href = '/landing'
      // this.$router.push('/landing') // uncomment if you are using Vue Router
    }, 1500)
  }
},
...
person Andrew Vasilchuk    schedule 24.08.2019
comment
он не проходит проверку и возвращается к посадке, даже если вы выбираете вариант - person ahzep; 24.08.2019