选择HTML不使用VueJs3

Question

我在我的POS网络应用程序中使用VueJs3，我正在获取产品类别，并希望在Select中循环这些类别，用户可以在其中选择一个类别，然后与该类别相关的产品将出现，但是我被困在用Axios调用API调用并存储在类别数据属性中以JSON格式获取产品类别的位置。

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

当我用Select循环这些类别时，这些类别不是用select选项循环的，这是我的html代码

            <div class="input-field col s12 m6">
                <select style="background: #F9F9F9" class="browser-default">
                    <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" class="">Product Category</label>
                </select>
            </div>

令人惊奇的是，当我用下面的代码进行测试时

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

然后，所有产品类别都会显示，它们应该显示在select的选项中，而且当我应用browser-default类进行选择时，开始循环，但是UI不好，浏览器默认的CSS代码如下。

select.browser-default {
    display: block;
}

我不知道我错在哪里，怎么解决这个问题，请帮我解决这个问题。

Answer 1

您的HTML应该如下所示：

    <div class="input-field col s12 m6">
      <label for="category" class="">Product Category</label>
      <select id="category" style="background: #f9f9f9" class="browser-default">
        <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>

主要是- value="{{ cat.id }}"应该改为:value="cat.id"。

Answer 2

看看下面的片段，如果您的数据存在，那么问题可能是input-field类：

​

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 class=" col s12 m6">
    <label for="category" class="">Product Category</label>
    <select v-model="category" id="category" style="background: #f9f9f9" class="browser-default">
      <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>

​

Answer 3

这是因为选择标签显示，尝试显示，，flex，或内联块，如果你不想改变用户界面(默认的选择显示是内联)

​

const app = Vue.createApp({
  data() {
    return {
      categories: [],
    };
  },
  mounted() {
      this.GetAllCategories();
  },
  methods: {
      async GetAllCategories() { 
          //Simulate axios 
          setTimeout(() => {
              this.categories = [{ id: "first optoion" }, { id: "second option" }];
          }, 2000);
      },
 }
})
app.mount('#demo')

<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 class="input-field col s12 m6">
        <select style="display:inline-block">
            <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" class="">Product Category</label>
        </select>
    </div>
</div>

​