基于 props 的 Vue 切换类答案

【问题标题】：Vue toggle class based on props基于 props 的 Vue 切换类
【发布时间】：2021-03-01 23:29:44
【问题描述】：

我正在尝试根据isNight 的真值切换一个类：

<div :class="['app-bg', { nightBg: isNight }]"></div>

我将isNight 属性设置为 false，如图所示：

export default {
  name: 'Result',
  data(){
    return {
      error: null,
      weather: null,
      weatherIcon: null,
      isNight: false
    }
  },
  . . .

我有一个计算函数，它根据一些数据返回真或假：

  computed: {
    nightChecker() {
      return this.weatherIcon.slice(2) == 'n' ? true : false
    }
  },

如何更新isNight 属性以反映nightChecker() 的返回值？我试过isNight: nightChecker，但会引发错误。

编辑：感谢所有帮助我更了解这一点的人。正如你所知道的，我是 Vue 的新手，但我仍在努力解决它。

【问题讨论】：

仅供参考，? true : false 完全是多余的
我认为您不应该从组件内部更改道具（道具应该由父组件更改）。您可能需要另一个使用 prop 和 nightChecker 方法的计算方法，并使用它来切换类。
对不起，我很困惑，因为 OP 说 prop 但它实际上是 data，它实际上是组件的内部

标签： vue.js

【解决方案1】：

假设错误是从weatherIcon 开始的null，这是因为null 没有slice 方法。反正你不需要slice。

slice 返回一个范围，但由于您只针对 1 个字符进行测试，因此评估索引更有意义
不使用slice，即使weatherIcon是null也不会出错
在cmets中提到，三元是不必要的，可以返回相等检查的值

computed: {
  nightChecker() {
    return !!this.weatherIcon && this.weatherIcon[2] === 'n';
  }
}

^{double not 是必要的，因为null && false 是null，而不是false}

如果还不清楚，这里有一个演示：

new Vue({
  el: "#app",
  data() {
    return {
      weatherIcon: null
    }
  },
  computed: {
    nightChecker() {
      return !!this.weatherIcon && this.weatherIcon[2] === 'n';
    }
  },
  methods: {
    toggle() {
      this.weatherIcon = this.weatherIcon === 'tonight' ? 'today' : 'tonight'
    }
  },
});

<div id="app">
  Is it night? {{ nightChecker }} <br>
  <button @click="toggle">Toggle day/night</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：

nightChecker() 方法仍然没有对我尝试更改的 isNight 属性做任何事情。
这不是一种方法，而是一种计算方法。计算不应该改变数据属性，它只是计算一些新的东西。两者都不需要，你用它代替isNight，你可以去掉。
将计算对象视为可自行更改的数据属性。将值设置为isNight 是没有意义的。

【解决方案2】：

如果我的问题是正确的，请确认，但是

data(){
  return {
    error: null,
    weather: null,
    weatherIcon: null,
    isNight: this.nightChecker()
  }
},

computed(){
  nightChecker(){
    return this.weatherIcon && this.weatherIcon.slice(2) === 'n';
  }
}

【讨论】：