vue.js - Vant4 Tabber 组件 v-model 值不生效，如何实现可控切换？

Question

vant4 中的 tabber 假设底部有“首页”、“社区”、“我的”，如果我要设定默认界面为社区，按理来说我应该赋值 v-model 的值为“社区”的 name 值，但实际指定“社区” name 属性后并没有成功，且不论如何修改 v-model 的值都没有反应（string、number 型都试过）。

可能出现的原因是，我并没有使用 to 方法跳转，而是自行编写的 click 事件，用于判断用户登录状态及权限等再跳转，click 函数内有设置 v-model的值。

---

我希望通过控制 v-model 的值实现 tabber 的可控。（已在对应子item设定name属性）

<van-tabbar class="footer-bar"  v-model:active="data.footerActive" :route="true" safe-area-inset-bottom active-color="#FF4000"  @change="watchchange">
 <van-tabbar-item name="bar"  @click.native="goTolbar()"  >
   <template #icon="props">
      {{ props.active }}
      <all-application theme="filled"  size="0.6rem" fill="#ff4000" strokeLinejoin="bevel" v-if="props.active ? true:false" />
      <all-application theme="outline" size="0.5rem" fill="#151616" strokeLinejoin="bevel" v-else />
   </template>
 </van-tabbar-item>
</van-tabbar>

由于需要在跳转前判断，所以我写了个 click 进行判断，并对 v-model 赋值对应的值，如 "bar"，但 props 的值一直为 false，即选中也没有图标的切换展示。

const goTolbar = () => {
  if(localStorage.getItem("islogin") === "true")
  {
    data.footerActive = "bar"
    router.replace({ path: '/bar' })
  }
  else
  {
    resultOfdoLogin.value = false
    setTimeout(() => {
        resultOfdoLogin.value = true
    },50)
  }
}

这里面 localStorage.getItem("islogin") 判断用户是否登录，如果登录则赋值 v-model,并跳转至 bar,否则 resultOfdoLogin 赋值为 true, 用于弹出指定窗口。

Answer 1

所以你的代码是怎么写的？我这边跑的小Demo是可以正常变更的。

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />

<div id="app"></div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

<script>
  const app = Vue.createApp({
    template: `<div>
      <h1>绑定的 active 值： {{active}}</h1>
      <div>
        <van-button v-for="item in menuList" type="primary" @click="onClick(item.key)">{{item.label}}</van-button>
      </div>
      <van-tabbar v-model="active">
        <van-tabbar-item v-for="item in menuList" :name="item.key" :icon="item.icon">{{item.label}}</van-tabbar-item>
      </van-tabbar>
    </div>`,
    data(){
      return {
        active: 'home',
        menuList: [
          { label: "home", key: "home", icon: "home-o" },
          { label: "search", key: "search", icon: "search" },
          { label: "friends", key: "friends", icon: "friends-o" },
          { label: "setting", key: "setting", icon: "setting-o" },
        ]
      }
    },
    methods: {
      onClick(key){
        this.active = key
      }
    }
  });
  app.use(vant);
  app.mount('#app');
</script>

Answer 2

在 Vant 4 的 Tabber 组件中，如果你想通过 v-model 来控制当前激活的 tab，并且你在点击事件中动态改变这个值，但发现它并没有生效，可能是因为你没有正确地触发 Vue 的响应式系统来更新这个值。

以下是一些可能的原因和解决方案：

1. 确保 v-model 绑定的值是一个响应式的数据：
   在 Vue 中，你需要确保 v-model 绑定的值是一个在 data、computed 或者 methods 中定义的响应式数据。
2. 不要在事件处理函数中直接修改 props：
   如果你的 v-model 绑定的值是一个从父组件传递过来的 prop，那么你不应该在子组件中直接修改它。你应该定义一个局部的数据属性来存储这个值，并在需要的时候使用 $emit 来通知父组件更新 prop。
3. 使用 this.$set 来更新数组或对象的属性：
   如果你的 v-model 绑定的是一个对象或数组的属性，并且你在初始化之后动态地添加了这个属性，那么你可能需要使用 Vue.set 或 this.$set 来确保这个属性是响应式的。但在 Vue 3（Vant 4 通常基于 Vue 3）中，你可以直接使用 ref 或 reactive 来确保对象的响应性。
4. 确保你的点击事件函数是正确的：
   确保你的点击事件函数确实修改了 v-model 绑定的值。你可以通过在函数中打印这个值来检查它确实是否被改变了。

以下是一个简单的示例，展示如何使用 v-model 来控制 Tabber 组件的激活 tab：

<template>
  <div>
    <van-tabber v-model="activeName">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="community" icon="chat-o">社区</van-tabbar-item>
      <van-tabbar-item name="profile" icon="user-o">我的</van-tabbar-item>
    </van-tabber>
    <button @click="changeTab">切换到社区</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('home'); // 初始激活的 tab 是 "首页"

    function changeTab() {
      // 切换到 "社区" tab
      activeName.value = 'community';
    }

    return {
      activeName,
      changeTab,
    };
  },
};
</script>

在这个示例中，v-model 绑定到了 activeName 这个响应式引用上，当你点击按钮时，changeTab 函数会修改 activeName.value 的值，从而触发 Tabber 组件的更新。