在 Vuejs 的 v-for 中使用 v-if 显示条件按钮答案

【问题标题】：show conditional buttons using v-if inside a v-for in Vuejs在 Vuejs 的 v-for 中使用 v-if 显示条件按钮
【发布时间】：2021-05-25 21:18:22
【问题描述】：

我想使用 v-if 在 v-for 循环中显示条件按钮（仅当 category_id=1 时）：这是 vuejs 部分：

<div class="w3-margin-bottom" v-for="category in categorys" v-bind:key="category.category_id">
  <div class="w3-quarter w3-button">
      <i class="w3-small" v-if="category.category_id='1'">
          <button class="w3-button w3-green">Sauce Blanche</button>
          <button class="w3-button w3-green">Sauce Rouge</button>
      </i>
      <div class="w3-container w3-red w3-padding-16">
        <div class="w3-clear">{{ category.category_des }}</div>
      </div>
  </div>
</div>

这是我的 javascript 部分：

import axios from "axios";
export default {
  data() {
    return {
      categorys: [],
      category_id: null,
      category_des: "",
    };
  },
  methods: {
    getCategory: function () {
      axios.get("http://127.0.0.1:8000/api/Category/").then((response) => {
        this.categorys = response.data;
      });
    },

【问题讨论】：

试试这样v-if="category.category_id === '1'
您的v-if 中有错字，= 必须是== 或===。总是仔细检查你的等号，这是一个非常容易犯的错误！

标签： javascript vue.js axios v-for

【解决方案1】：

<template v-if="category.category_id === '1'">
  --buttons-- 
</template>

这假定 category_id 是一个字符串。如果是数字，请省略小引号。

【讨论】：

【解决方案2】：

v-if="category.category_id = '1'" 始终为 true，因为您使用了赋值运算符 (=)，而不是 equality operator (==) 或引用相等运算符 (===)。

改为： v-if="category.category_id === '1'"

【讨论】：