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

user_14683078 0
Viewed 857

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;
      });
    },
v-for axios vue.js javascript
2 Answers
<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.

user_14093100

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

user_49837520
Related