Vue v-如果不更新

Question

这是我的 Vue 模板的一部分：

<ul>
   <li v-for="friend in user.friends">
       <span v-if="checkIfNew(friend.id)"> ... </span>
   </li>
</ul>

基本上，friends 是一个对象数组，如果我们有来自其中任何一个的新消息，我想显示 span 元素。这就是checkIfNew() 所做的。它检查朋友的 id 是否在unreadIds 数组中（它包含发送消息的朋友的 id）

此数组正在以不同的方法更新，但问题是：v-if 对更改没有反应。

这是脚本部分的一部分：

data(){
   return {
      unreadIds: []
   }
},
methods:{
   checkIfNew(id){
      if(id in this.unreadIds) return true
      else return false
   }
},
computed:{
    user(){
      return this.$store.getters.user;
    }
}

有人知道我做错了什么吗？

Answer 1

id in this.unreadIds 并没有按照你的想法去做。请参阅in operator 的文档。如果对象具有该值作为属性，它将返回true。因此，如果 this.unreadIds 有 3 个项目并且您的 id 为 1，则 in 运算符将返回 true，因为 1 是数组的属性（this.unreadIds[1] 存在）。

您应该使用includes。

尝试像这样重写你的方法：

checkIfNew(id) {
  return this.unreadIds.includes(id);
}

---

这是一个没有 Vuex 商店代码的更新列表的组件的工作版本：

<ul>
  <li v-for="friend in user.friends" :key="friend.ids">
    <span v-if="checkIfNew(friend.id)">{{ friend.name }}</span>
  </li>
</ul>

export default {
  data() {
    return {
      unreadIds: [5],
      user: {
        friends: [
          { id: 1, name: 'joe' },
          { id: 5, name: 'nancy' },
          { id: 9, name: 'sue' },
        ],
      },
    };
  },
  created() {
    setTimeout(() => this.unreadIds.push(9), 2000);
  },
  methods: {
    checkIfNew(id) {
      return this.unreadIds.includes(id);
    },
  },
};

---

这里只是为了证明大卫一直都是正确的，我把这段代码放在一个可运行的sn-p中，找不到任何错误...

Vue.config.productionTip = false
new Vue({
  el: '#app',
  data() {
    return {
      unreadIds: [],
    };
  },
  created() {
    setTimeout(() => this.unreadIds.push(9), 2000);
  },
  methods: {
    checkIfNew(id) {
//      if(id in this.unreadIds) return true
//      else return false
      return this.unreadIds.includes(id);
    },
  },
  computed: {
    user(){
      return {
        friends: [
          { id: 1, name: 'joe' },
          { id: 5, name: 'nancy' },
          { id: 9, name: 'sue' }
        ]
      }
    }
  }
})

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

<div id="app">
  <ul>
    <li v-for="friend in user.friends" >
      <span v-if="checkIfNew(friend.id)">{{ friend.name }}</span>
    </li>
  </ul>
</div>

上面的示例更接近原始问题

• 用户是计算的非数据
• unreadIds 最初为空

给我点赞！

Answer 2

您想利用 Vue 的反应性系统，因为前面的答案没有。它们最终会让您遇到难以调试的莫名其妙的问题。

而不是在 v-for 中调用方法（我保证将来会给您带来问题），您应该声明一个包含（或不包含）您想要呈现的项目的计算列表，就像这样：

data(){
   return {
      unreadIds: []
   }
},
computed:{
    user(){
      return this.$store.getters.user;
    },
    NewFriends() {
       return this.user.friends.filter(friend => this.unreadIds.includes(friend.id));
    }
}

您的标记将是：

<ul>
   <li v-for="friend in NewFriends">
       <span > ... </span>
   </li>
</ul>

而且 Vue 的反应性系统会处理 NewFriends 的数据依赖关系的任何更改。

您永远不想在模板中使用方法调用，因为方法调用只能保证被调用一次（这同样适用于来自计算方法的函数...）。

如果您发现自己试图手动触发重新渲染和依赖性检查，您将需要重新考虑您的设计。

ETA：您唯一需要在模板中调用任何类型的函数是响应事件。

Answer 3

我会试一试 - 有人早些时候发布了这个并删除了它。您需要 checkIfNew() 是计算而不是模板中的反应性方法。

由于需要传入id，计算需要返回一个函数。

data(){
   return {
      unreadIds: []
   }
},
computed:{
    user(){
      return this.$store.getters.user;
    },
   checkIfNew(){
      return (id) => {
        return this.unreadIds.includes(id);
      }
   }
}

正如 David Weldon 所说，理想情况下，您应该不可变地更改数组 - 这可能是为什么 ohgodwhy 会问原始问题。