为何在add_dar函数中添加return后v-if指令失效？

首先咱们拆解下核心问题：Vue的响应式系统无法检测到数组通过索引直接赋值的变化，而你添加return后刚好把这个隐藏问题暴露了出来。

为什么加return后v-if失效？ #

在你没加return的时候，哪怕进入if分支执行完赋值，函数会走完整个逻辑流程。此时Vue的异步更新队列可能会在函数执行结束后，通过一些间接逻辑触发模板更新（比如其他关联状态的变化），所以v-if能正常工作。

但当你添加return后，函数在执行this.css_max_count[i] = true后立刻退出，而这种直接通过索引修改数组元素的操作，并不在Vue的响应式追踪范围内——Vue根本不知道css_max_count数组发生了变化，自然不会更新模板里的v-if状态。

另外你的add_dar函数还有个隐藏错误：模板里v-for的im是局部变量，函数里直接访问im.count_buy会导致im未定义，得用this.sorted_listim[i].count_buy来获取对应项的值。

修复方案 #

把直接索引赋值替换为Vue提供的this.$set方法，主动通知响应式系统数组发生了变化：

add_dar(i) {
  // 先修正im的引用问题
  const currentIm = this.sorted_listim[i];
  // 假设count是组件的data属性，记得加this
  if (currentIm.count_buy < this.count) { 
    this.$set(this.css_max_count, i, true);
    return; // 现在加return也不会失效了
  } else {
    this.$set(this.css_max_count, i, false);
  }
}

你也可以通过重新生成数组的方式触发更新（本质是替换整个数组引用）：

// 以if分支为例
this.css_max_count = [
  ...this.css_max_count.slice(0, i), 
  true, 
  ...this.css_max_count.slice(i+1)
];

原理补充 #

Vue对数组的响应式监听是通过重写push/pop/splice等数组方法实现的，直接通过索引修改元素或修改length属性，都不会触发响应式更新。this.$set会主动告知Vue的响应式系统数组某个位置的元素已变更，从而触发模板重新渲染。

内容的提问来源于stack exchange，提问作者Magni