Доступ и отображение данных зависят от данных, которые вы вводите в Vue.js и vuex. - PullRequest
0 голосов
/ 29 октября 2019

Ребята, я хочу получить доступ к комнатам, зависит от того, какой тикет я пишу при вводе, а затем я хочу показать комнату, к которой я иду. Но я не мог найти, как связать эти данные между ними. Я использую vuex для своих данных, и у меня есть структура компонентов в этом проекте, так что вы, ребята, можете помочь мне в этой ситуации. Я думаю, что могу использовать Axios, но я не знаю, как именно это работает.

<template>
        <div>
            <label for="">Enter Your Ticket ID</label>
            <input type="number">
        </div>
    </template>

    <script>
    import { mapGetters } from 'vuex';
    export default {
        data() {
            return {
                data : []
            }
        },
        computed: {
            ...mapGetters({
                rooms : 'rooms',
                tickets : 'tickets'
            })
        },
        methods: {

        },
    }
    </script>

    export const store = new Vuex.Store({
        state : {
            users : [
                {"id":3001,"name":"Alex","Age":"25"},
                {"id":3002,"name":"John","Age":"30"},
                {"id":3003,"name":"Deigo","Age":"45"}
            ],
            tickets :[
                {"ticketID":1001,
                "ticketNumber":"2783sA",
                "startDate":"05/10/2018",
                "expireDate":"10/21/2022",
                "hours":"08:00-22:00"},
                {"ticketID":1002,
                "ticketNumber":"8a210j",
                "startDate":"01/03/2018",
                "expireDate":"01/03/2020",
                "hours":"14:00-18:00"},
                {"ticketID":1003,
                "ticketNumber":"L90Np1",
                "startDate":"10/01/2015",
                "expireDate":"10/01/2020",
                "hours":"10:00-20:00"},
                {"ticketID":1004,
                "ticketNumber":"L90Np1",
                "startDate":"05/01/2015",
                "expireDate":"05/01/2016",
                "hours":"15:00-23:00"}],
            rooms :[
                {"id":2001,"ticketID":"1001","name":"Conference Hall","floor":2,"number":100,"devices":
                [{"id":"20011","type":"none","name":"Chair 1"},
                {"id":"20012","type":"none","name":"Chair 2"},
                {"id":"20013","type":"none","name":"Table"},
                {"id":"20013","type":"interactable","name":"TV"},
                {"id":"20014","type":"none","name":"Big Table"}]},
                {"id":2002,"ticketID":"1002","name":"CEO Office","floor":8,"number":510,"devices":
                [{"id":"20021","type":"none","name":"Office Chair Set"},
                {"id":"20022","type":"interactable","name":"Video Projector"},
                {"id":"20023","type":"interactable","name":"TV"},
                {"id":"20024","type":"none","name":"Shredder"},
                {"id":"20025","type":"none","name":"Paperbox"},
                {"id":"20026","type":"interactable","name":"Air Conditioner"}]},
                {"id":2003,"ticketID":"1003","name":"Library","floor":5,"number":315,"devices":
                [{"id":"20031","type":"none","name":"Bookshelf 1"},
                {"id":"20032","type":"none","name":"Bookshelf 2"},
                {"id":"20033","type":"none","name":"Bookshelf 3"},
                {"id":"20034","type":"interactable","name":"Light 1"},
                {"id":"20035","type":"interactable","name":"Light 2"},
                {"id":"20036","type":"interactable","name":"Light 3"},
                {"id":"20037","type":"none","name":"Desk 1"},
                {"id":"20038","type":"none","name":"Desk 2"},
                {"id":"20039","type":"none","name":"Large Table 1"},
                {"id":"200310","type":"none","name":"Large Table 2"}]},
                {"id":2004,"name":"Computer Science Classroom","floor":1,"number":15,"devices":
                [{"id":"20041","type":"none","name":"Computer Desk 1"},
                {"id":"20042","type":"none","name":"Computer Desk 2"},
                {"id":"20043","type":"none","name":"Computer Desk 3"},
                {"id":"20044","type":"interactable","name":"Mac Book Air"},
                {"id":"20045","type":"interactable","name":"Mac Book Pro"},
                {"id":"20046","type":"interactable","name":"Dell System"},
                {"id":"20047","type":"none","name":"Wall Plug 1"},
                {"id":"20048","type":"none","name":"Wall Plug 2"},
                null,
                {"id":"20049","type":"none","name":"Large Center Table"}]}
            ]
        },
    });

1 Ответ

1 голос
/ 29 октября 2019

Насколько я понимаю: Вы хотите ввести любой идентификатор билета в поле ввода, и в зависимости от идентификатора билета должны быть показаны номера, которые связаны с идентификатором билета?

Вы должны отфильтровать состояние по ticketID. Используйте: return this.rooms.filter(room => room.ticketID === this.ticketID) как вычисляемый реквизит. Добавьте ticketID в ваш раздел данных и смонтируйте v-модель в своем входе в ticketID. И, конечно же, вызовите ваш вычисленный объект в шаблоне, чтобы показать отфильтрованные данные (с помощью v-for, потому что filter () возвращает массив).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...