I am using VueJs3 in my POS Web Application, I am Fetching Product Categories and want to loop these categories in Select Tag where the user can select a category and then relevant to that category products will appear but I am stuck at that point where I am getting product categories in JSON format by calling API call using Axios and stored in the categories data property

<script>
import axios from 'axios';

export default {
    name: "ProductComponent",
    data() {
        return {
            items: 18,
            category: null,
            categories: [],
            brands: [],
            products: [],
        }
    },
    mounted() {
        this.GetAllCategories();
        this.GetAllProducts();
    },
    methods: {
        ChangeCategory() {
            alert('Category Changed');
        },
        // Stored To Cart
        addToCart(id) {
            alert(id);
        },

        // Get All Categoris
        async GetAllCategories() {
            // alert("I am Called");
            await axios.get('api/categories')
                .then(res => {
                    this.categories = res.data;
                })
                .catch(err => {
                    console.error(err);
                });
        },
        // Get All Products
        async GetAllProducts() {
            await axios.get('api/products')
                .then(res => {
                    this.products = res.data;
                    console.log(res.data);
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
}
</script>

When I loop these categories with Select then these categories are not looping with select options here is my html code

            <div >
                <select style="background: #F9F9F9" >
                    <option value="" selected disabled>All Categories</option>
                    <option v-for="cat in categories" :key="cat.id" value="{{ cat.id }}"> {{ cat.id }} Select</option>
                    <label for="category" >Product Category</label>
                </select>
            </div>

and amazing thing is that when I tested with this below code

<p v-for="cat in categories" :key="cat.id">{{ cat.category_name }}</p> 

then all product categories show as they should be shown in the select's options and moreover when I apply browser-default class to select then started looping but the UI Not good and the CSS code of browser-default is below

select.browser-default {
    display: block;
}

I could not figure out where I am wrong and how can I solve this issue, please help me to solve this issue.

CodePudding user response：

Your HTML should look like this:

    <div >
      <label for="category" >Product Category</label>
      <select id="category" style="background: #f9f9f9" >
        <option value="" selected disabled>All Categories</option>
        <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.id }} Select</option>
      </select>
    </div>

Mainly - value="{{ cat.id }}" should be changed to :value="cat.id".

CodePudding user response：

Take a look at following snippet, if your data is there maybe the problem is input-field class:

const app = Vue.createApp({
  data() {
    return {
      categories: [{id: 1, category_name : 'aaa'}, {id: 2, category_name : 'bbb'}, {id: 3, category_name : 'ccc'}],
      category: null
    };
  },
})
app.mount('#demo')

select.browser-default {
   display: block;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" integrity="sha512-17AHGe9uFHHt QaRYieK7bTdMMHBMi8PeWG99Mf/xEcfBLDCn0Gze8Xcx1KoSZxDnv KnCC os/vuQ7jrF/nkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="demo">
  <div >
    <label for="category" >Product Category</label>
    <select v-model="category" id="category" style="background: #f9f9f9" >
      <option :value="null" selected disabled>All Categories</option>
      <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.id }} {{ cat.category_name }} - Select</option>
    </select>
    <p>{{ category }}</p>
  </div>
</div>