Блог

#vue.js #computed-properties

#vue.js #вычисляемые свойства

Вопрос:

 <div :class="['view view-index', { 'banner-visible' : showMainBanner }]">
  

 computed: {
  showMainBanner () {
    return (Cookies.get('banner_dismiss')) ? false : this.$store.state.config.showMainBanner
  }
}
  

 mounted () {
  console.log('showMainBanner = '   this.showMainBanner)
}
  

 showMainBanner () {
  if (Cookies.get('banner_dismiss')) {
    console.log('RETURN FALSE')
    return false
  } else {
    console.log('RETURN TRUE')
    return this.$store.state.config.showMainBanner
  }
}
  

Комментарии:

1. можете ли вы показать, от какого значения данных зависит ваше вычисленное значение? Я думаю, что во время обновления страницы значение данных, от которого зависит ваше вычисленное значение, никогда не обновляется, отсюда и странное поведение, но вычисляемое свойство showMainBanner в консоли принимает значение false. регистрируется при обновлении страницы, так что это также может быть проблемой в синтаксисе массива вашей привязки класса. Вы пробовали вносить изменения в синтаксис массива? нравится делать <div v-bind:class="[view, view-index, { banner-visible : showMainBanner }]"> или что-то в этом роде?

2. Спасибо, я пытался, но получаю ошибки компиляции: 'v-bind' directives require an attribute value и Parsing error: Line 1: Unexpected token, expected ","

3. да, данные должны быть объявлены для таких классов, как data { view: 'view', view-index: 'view-index' } . В любом случае, кажется, что условие истинности истинно, даже если возвращаемое значение равно false. Я не уверен, что он принимает значение true, пока есть возвращаемое значение, можете ли вы попробовать вернуть null вместо false ? также попробуйте разделить классы и установить значение consition как false, например, :class="['view','view-index', { 'banner-visible' : false }]" затем попробуйте обновить.

4. Таким образом, это работает независимо от того, возвращаю ли я «вручную» null или false . Для меня это не имеет никакого смысла: если я возвращаю false вручную, это работает, но если я возвращаю false «программно», это не так… Почему?? Это false в обоих случаях!

5. это означает, что оценка showMainBanner никогда не изменяется при обновлении страницы, теперь вопрос в том, следует ли вам продолжать использовать вычисленное значение, потому что кажется, что showMainBanner не зависит ни от каких данных в текущей области видимости функции, так почему бы не использовать для этого обычный метод?

Ответ №1:

Комментарии:

1. Эта проблема реактивности должна быть решена путем перехода с then обратно на страницу, но также путем обновления страницы, не так ли? Тем не менее, это не

Ответ №2:

 console.log(typeof Cookies.get('banner_dismiss'))
//=> string
  

 computed: {
  showMainBanner () {
    let dismiss = Cookies.get('banner_dismiss') === 'undefined' ? false : JSON.parse(Cookies.get('banner_dismiss'))
    return dismiss ? false : this.$store.state.config.showMainBanner
  }
}
  

 computed: {
  showMainBanner () {
    let dismiss = Cookies.get('banner_dismiss') === 'true'
    return dismiss ? false : this.$store.state.config.showMainBanner
  }
}
  

Комментарии:

1. Спасибо, я получаю ` ERROR [Vue warn]: ошибка при рендеринге: «SyntaxError: неожиданный токен u в JSON в позиции 0″` при выполнении этого, хотя и я не уверен, почему

2. @drake035, это потому, что ваш cookie пустой и возвращает undefined (это нарушает JSON.parse). Попробуйте добавить другое условие, например, if (Cookie.get('banner_dismiss') !== 'undefined') на основе того, что вам нужно вернуть в этом случае/

3. Все еще получаю ту же ошибку в строке: const dismiss = (Cookies.get('banner_dismiss') !== 'undefined') amp;amp; JSON.parse(Cookies.get('banner_dismiss'))

4. @drake035 вы правы, я увидел свою ошибку, когда редактировал свой ответ. undefined Условие должно быть первым, ЗАТЕМ вы анализируете cookie (а не И т.е. amp;amp; ). Я обновил свой ответ… снова 🙂

5. Готово, я получаю ERROR [Vue warn]: Error in render: "SyntaxError: Unexpected token u in JSON at position 0"