Vue中根据userId匹配状态切换显示Submit/Update按钮问题求助

原代码的问题分析 #

• 错误的循环逻辑：你用v-for遍历previousUsers数组，相当于要给每个数组元素都渲染一组按钮，但你的需求是判断userId是否在整个数组中，不需要逐个元素判断，这完全偏离了需求逻辑。
• 条件判断错误：第二个按钮的v-if="previousUser == !userId"逻辑完全错误，!userId会把数字类型的userId转为布尔值（比如userId=3时，!3等于false），而previousUser是1或2，不可能和false相等，所以永远不会显示Submit按钮。

正确实现方式 #

我们只需要判断userId是否存在于previousUsers数组中，直接用数组的includes方法即可，不需要循环数组。同时补充对应的方法（update和add）避免报错。

修改后的完整代码：

JS代码

new Vue({
  el: '#app',
  data: function() {
    return {
      userId: 3,
      previousUsers: [1, 2],
    }
  },
  methods: {
    update() {
      // 这里写更新逻辑
      console.log('执行更新操作');
    },
    add() {
      // 这里写新增逻辑
      console.log('执行提交操作');
    }
  }
})

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="text-center mt-3">
  <button v-if="previousUsers.includes(userId)" class="btn btn-primary" @click="update">Update</button>
  <button v-else class="btn btn-primary" @click="add">Submit</button>
</div>

改动说明 #

• 移除了多余的v-for循环，因为我们不需要为数组每个元素都渲染按钮
• 用previousUsers.includes(userId)判断userId是否在数组中，符合需求逻辑
• 用v-else替代错误的第二个v-if，当数组不包含userId时自动显示Submit按钮
• 补充了update和add方法，避免点击按钮时报错

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