Vue.js组件v-for与v-if联用异常：无法正确显示激活套餐

看起来你遇到了两个核心问题：一是Vue模板的data变量未定义导致的警告，二是尽管后端返回了套餐数据，但页面仍显示"无激活套餐"。咱们一步步来排查修复：

1. 先解决"Property or method 'data' is not defined"警告 #

这个警告说明你在Vue模板里直接引用了data这个变量，但你的组件data选项里并没有声明它。比如你可能写了类似v-for="bono in data"的代码，但实际上应该把后端返回的套餐数据存在组件data的具体属性里，比如activeBonos。

修正Vue组件的数据结构和请求逻辑 #

假设你的Vue组件代码大概是这样的，咱们调整一下：

<template>
  <div class="bono-container">
    <!-- 先判断是否有激活套餐，再执行渲染 -->
    <div v-if="activeBonos.length > 0">
      <div v-for="bono in activeBonos" :key="bono.codBono">
        <!-- 显示套餐信息，比如名称、有效期等 -->
        <h3>{{ bono.nombre }}</h3>
        <p>剩余时长：{{ bono.duracion }}天</p>
      </div>
    </div>
    <div v-else>
      <button>购买套餐</button>
      <p>无激活套餐</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeBonos: [] // 声明存储激活套餐的数组
    }
  },
  mounted() {
    // 调用Laravel接口获取数据
    axios.get('/getBonoUsuario')
      .then(response => {
        console.log(response.data); // 控制台能看到数据，说明请求成功
        this.activeBonos = response.data; // 把返回的数组赋值给组件属性
      })
      .catch(error => {
        console.error('获取套餐数据失败:', error);
      });
  }
}
</script>

⚠️ 注意：不要在同一个元素上同时使用v-for和v-if，Vue官方不推荐这种写法——因为v-for优先级更高，会导致不必要的循环判断。上面的代码把v-if放在父元素上，先判断数组是否有内容，再执行v-for渲染。

2. 排查页面显示"无激活套餐"的问题 #

你说控制台能看到包含套餐数据的数组，但页面还是显示无激活套餐，可能有以下原因：

• 数据赋值错误：你可能没把后端返回的response.data正确赋值给组件属性，比如误写为this.activeBonos = response（漏掉了.data）。
• 数组判断逻辑错误：比如用了activeBonos == null或者activeBonos === undefined判断，但后端返回空数组时，activeBonos.length才是0，应该用activeBonos.length > 0来判断是否有数据。
• 后端返回的数据结构问题：Laravel的DB::select返回的是对象数组，你可以在控制台打印response.data，确认每个对象的字段是否符合你的模板渲染需求（不过你的SQL已经过滤了activo = 1，所以返回的都是激活状态的套餐）。

3. 优化后端代码（可选） #

你的Laravel控制器代码存在SQL注入风险（直接把$usuario拼到SQL里），可以改用参数绑定优化：

public function getBonoUsuario(){
    $usuario = \Auth::user()->id;
    // 使用参数绑定防止SQL注入
    $bonoUsuario = \DB::select(
        "SELECT * FROM contratan, bonos WHERE usuario = ? AND contratan.bono = bonos.codBono AND activo = 1",
        [$usuario]
    );
    return $bonoUsuario;
}

或者用Eloquent关联来写，更符合Laravel的风格：

// 在User模型里定义关联
public function activeBonos()
{
    return $this->belongsToMany(Bono::class, 'contratan', 'usuario', 'bono')
                ->wherePivot('activo', 1);
}

// 控制器里调用关联获取数据
public function getBonoUsuario(){
    $bonoUsuario = \Auth::user()->activeBonos->toArray();
    return $bonoUsuario;
}

这样代码更清晰，也更安全。

总结 #

1. 确保Vue组件的data选项里声明了正确的属性（比如activeBonos），模板里引用的是这个属性而非data变量。
2. 调整v-for和v-if的使用方式，避免在同一个元素上混用。
3. 确认后端返回的数据正确赋值给了组件属性，并且用数组.length > 0判断是否有数据。
4. 优化后端代码，使用参数绑定防止SQL注入。

按照上面的步骤调整后，应该就能正常显示激活套餐或者购买按钮了。

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