show conditional buttons using v-if inside a v-for in Vuejs

Question

I want to show conditional buttons inside a v-for loop using v-if (only when category_id=1): this is the vuejs part:

<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>

and this is my javascript part:

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;
      });
    },

You've just got a typo in your v-if, = needs to be == or ===. Always double check your equal signs, this is a really easy mistake to make! — zcoop98
– zcoop98, Commented May 25, 2021 at 21:27

Joseph Connolly · Accepted Answer · 2021-05-25 21:23:50Z

3

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

This assumes category_id is a string. Leave off the small quotes if it is a number.

answered May 25, 2021 at 21:23

Joseph Connolly

94511 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ulou · Accepted Answer · 2021-05-25 21:23:59Z

3

v-if="category.category_id = '1'" is always true, cause you used assign operator (=), instead of equality operator (==) or reference equality operator (===).

Change this to this instead: v-if="category.category_id === '1'"

answered May 25, 2021 at 21:23

ulou

5,9326 gold badges40 silver badges51 bronze badges

Collectives™ on Stack Overflow

show conditional buttons using v-if inside a v-for in Vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related