Javascript 在页面重新加载时未更改正在监视的属性时，Vue监视不会运行 导出默认值{ 名称：“导航栏”， 道具：[性别]， 数据（）{ 返回{ 伊斯男孩：错， isGirl:错， } }, 观察：{ 性别：职能（）{ 如果（this.gender=='male'）{ this.isGirl=false 这是真的 返回0 }否则{ this.isBoy=false 这是真的 返回0 } } } } .导航干线{ 填充：20px0； 显示：网格； } 导航{ 显示：内联块； } .菜单{ 网格柱：1/4； 文本对齐：右对齐； } .设置{ 网格柱：4/6； 文本对齐：右对齐； } a{ 颜色：白色； 文字装饰：无； 填充：0 50px； 字体系列：“Nunito”，无衬线； } .女性{ 背景#ffb6c1； } .男{ 背景#4169e1； }

我计划做的是，如果在属性“gender”中传递的值为男性，则在导航栏上应用类男性，但如果应用其他值，则将应用类女性 这工作得很好，每当我更改属性时，一切都按计划进行，但每当我重新加载页面时，watch函数不会触发，值保持不变 为什么会发生这种情况，我如何解决它

---

比如说，如果我以男性身份传递道具，则应用男性类，如果我将道具更改为女性，则应用女性更改，但现在如果我重新加载页面，则不会发生任何事情，将

isBoy

isGirl

更改为基于

gender

prop的计算属性：

<template>
<!-- The navbar has a property for gender, the color of the navbar will change depending on the 
 gender -->
<!-- pass the props gender through a form submission and event -->

<div class="nav-main" :class="{female: isGirl, male: isBoy}">
  <nav class="menu">
      <a href="#">Home</a>
      <a href="#">Find</a>
      <a href="#">Match</a>
  </nav>
  <nav class="settings">
      <a href="#" class="setting-link">Settings</a>
  </nav>
</div>
</template>

<script>

export default {
 name: 'Navbar',
 props: ['gender'],
 data(){
    return{
        isBoy: false,
        isGirl: false,
    }
 },
 watch: {
    gender: function(){
        if(this.gender === 'male'){
            this.isGirl = false
            this.isBoy = true
            return 0
        }else{
            this.isBoy = false
            this.isGirl = true
            return 0
        }
    }

 }
 }

 </script>

 <style scoped>
 .nav-main{
    padding: 20px 0;   
    display: grid;  
    
  }
 nav{
    display: inline-block;
 }
 .menu{
    grid-column: 1/4;
    text-align: right;
 }
 .settings{
    grid-column: 4/6;
    text-align: right;
 }
 a{
    color: white;
    text-decoration: none;
    padding: 0  50px;
    font-family: 'Nunito', sans-serif;
 }
 .female{
    background: #ffb6c1;
}
.male{
    background: #4169e1;
}
</style>

---

代码较短，计算属性对道具的更改有反应。

使用

computed

的方法很好。而

watch

功能不起作用的原因可能是在您的手表代码开始工作之前，

prop:gender

发生了变化。

---

所以试试看

watch

的选项，

immediate:true

哇！！！有时，看到这样的解决方案，我会想，我认为程序员有多好，因为您缺少添加

immediate:true

属性

props: ['gender'],

computed: {
    isBoy() {
         return this.gender==='male'
    },

    isGirl() {
        return !this.isBoy
    }
}