根据附加的变量值，绑定类似乎无法正常工作

Posted 2023-02-23

【中文标题】根据附加的变量值，绑定类似乎无法正常工作

【英文标题】：Binding class doesn't seem to work properly based on attached variable value

【发布时间】：2019-08-19 02:21:14

【问题描述】：

我的banner-visible 绑定类受我的showMainBanner 计算属性的限制：

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

这是我定义计算属性的方式：

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

当我重新加载页面时，我可以通过控制台在mounted() 钩子中记录计算属性的值：

mounted () 
  console.log('showMainBanner = ' + this.showMainBanner)

在页面加载的控制台中，我看到：showMainBanner = false

然而，banner-visible 类仍然存在，尽管 showMainBanner 的值为 false。

这怎么可能？

最令人费解的是：当我通过链接导航页面，然后通过链接返回时，不会出现此问题。但是，如果我刷新页面，它会这样做。

编辑：

我将代码更改为更明确的内容：

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

刷新页面后，我在控制台中看到 RETURN FALSE 并且我仍然看到来自 console.log() 调用中的 showMainBanner = false mounted() 钩子。很明显，showMainBanner肯定等于false。

这里有黑魔法吗？

【问题讨论】：

您能否显示您的计算值所依赖的数据值？我认为在页面刷新期间，您的计算值所依赖的数据值永远不会更新，因此会出现奇怪的行为，但是当您刷新页面时，console.log 中的 showMainBanner 计算属性评估为 false，因此它也可能是一个问题在类绑定的数组语法中。您是否尝试更改数组语法？喜欢<div v-bind:class="[view, view-index, banner-visible : showMainBanner ]"> 或类似的东西？

谢谢，我试过了，但编译时出现错误：'v-bind' directives require an attribute value 和 Parsing error: Line 1: Unexpected token, expected ","

是的，需要为data view: 'view', view-index: 'view-index' 等类声明数据。无论如何，即使返回为假，真值条件似乎也为真。只要有返回值，我不确定它是否评估为真，您可以尝试返回null而不是false吗？还可以尝试分离类并将条件设置为 false，例如 :class="['view','view-index', 'banner-visible' : false ]"，然后尝试刷新。

所以无论我“手动”返回null 还是false 都可以。这对我来说是零意义：如果我手动返回false 它可以工作，但是如果我以“编程方式”返回false 它不会......为什么？在这两种情况下都是false！

这意味着刷新页面时showMainBanner 的评估永远不会改变，现在的问题是您是否应该继续使用计算值，因为似乎 showMainBanner 不依赖于当前函数作用域，为什么不使用普通方法呢？

【参考方案1】：

您的问题是因为您的 cookie 返回一个字符串：

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
  

---

或者如果你想在 Cookie 为空的情况下避免 JSON 的错误，你可以添加一个普通的条件：

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

【讨论】：

谢谢，我得到一个`错误 [Vue 警告]：渲染错误：“SyntaxError: Unexpected token u in JSON at position 0”` 虽然我不知道为什么跨度>

@drake035，这是因为您的 Cookie 为空并返回 undefined（它破坏了 JSON.parse）。尝试添加花药条件，如 if (Cookie.get('banner_dismiss') !== 'undefined') 基于在这种情况下您需要返回的任何内容/

仍然出现同样的错误：const dismiss = (Cookies.get('banner_dismiss') !== 'undefined') && JSON.parse(Cookies.get('banner_dismiss'))

@drake035 你说得对，我在编辑答案时看到了我的错误。 undefined 条件必须是第一个然后你解析cookie（而不是AND，即&&）。我更新了我的答案......再次:)

完成，我收到ERROR [Vue warn]: Error in render: "SyntaxError: Unexpected token u in JSON at position 0"

【参考方案2】：

Cookies 没有反应。在第一次评估 showMainBanner 后，Vue 不会再次评估它。

当您离开并返回时，Vue 将再次评估计算属性，这一次 Cookie 已经设置。

【讨论】：

这个反应性问题应该通过导航离开然后回到页面来解决，但也可以通过刷新页面来解决，不是吗？然而它没有