时间戳

首页 > 解决方案 > 根据 vue 中的 ID 获取下拉菜单

vue.js - 根据 vue 中的 ID 获取下拉菜单

问题描述

我有 2 页，一个有产品列表，另一个有该产品的一堆数据。第二页还有一个下拉菜单。

我遇到的问题是我正在努力让下拉菜单选择所选产品。

例如，如果我从第一页选择产品 1，那么在第二页上，下拉菜单将显示产品 1，如果我选择产品 2，则下拉菜单将显示产品 2。

这是我的 productIndex.vue 代码

<template>
    <div>
        <div class="content-header">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Product Index</h3>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-sm table-hover">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Product Name</th>
                                            <th style="width: 180px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="product in products">
                                            <td>{{ product.id }}</td>
                                            <td>{{product.name}}</td>
                                            <td class="text-right">
                                                <a @click="goToProductData(product.id)" class="btn btn-xs btn-primary">
                                                    Data
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        props: ['products'],
        data() {
            return {

            }
        },
        methods: {
            goToProductData(product_id){
                localStorage.setItem('product',  product_id);
                window.location =  `/product-data`;
            }
        },
    }
</script>

这是我的 productData.vue

<template>
    <div>
        <div class="content-header">
            <div class="container">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label for="product_id_select">Product</label>
                                <select id="product_id_select" class="form-control select2" style="width: 100%;">
                                    <optgroup v-for="product in selectProducts" :label="customer.text">
                                        <option v-for="p in product.children" :value="p.id">{{ p.text }}</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['products'],
        data() {
            return {

            }
        },
        computed: {
            selectProducts() {
                let select2Options = [];

                Object.keys(this.products).forEach(product => {
                    let productOptions = [];

                    this.products[product].forEach(p => {
                        productOptions.push({ id: p.id, text: p.name });
                    });

                    select2Options.push({
                        text: product,
                        children: productOptions
                    });

                });

                return select2Options;
            }
        }
    }
</script>

标签： vue.js

解决方案

您忘记将 v-model 添加到select第二页中。你可以在这里找到一些例子。你的代码应该是这样的：

<select id="product_id_select" v-model="selectedProductId" class="form-control select2" style="width: 100%;">

whereselectedProductId是您的数据（或计算属性）中的一个值，其中包含插入到第一页的本地存储中的值

推荐阅读