Как добавить элемент из выпадающего списка - keen-ui - PullRequest
0 голосов
/ 18 апреля 2020

Я создаю форму Dynami c, которая позволит пользователям автоматически генерировать изображение со своей статистикой игры с помощью vue. js и использует Keen-ui. Я новичок в vue. js и начал изучать его последние 2 недели.

Теперь у меня возникла проблема с выпадающим списком select с помощью keen-ui. Я пытаюсь добиться функционального раскрывающегося списка, который позволит пользователю выбрать режим игры, а при выборе добавить строку запроса.

Например: https://example.com/hive/stats/bedrock/dr?bg=dark&player=ntmnathan

  • «dr» - это опция выбора
  • «bg» - это опция выбора
  • «player» - это текстовое поле ввода.

К сожалению, , выпадающий список не работает для меня, я использовал текстовые поля ввода во всех из них, и они, казалось, отлично работают и добавить к ссылке.

Демо: https://codepen.io/Nathantominecraft/pen/RwWRVPZ

index. html

image

custom. js

new Vue({
    el: '#bedrockstatscard',

    data() {
        return {
            baseUrl: 'https://example.com/hive/stats/bedrock',
            game: '',
            game: ['dr', 'wars', 'hide', 'murder', 'sg'],
            bg: '',
            player: ''
        }
    },
    methods: {
        checkEvent (val) {
            this.baseUrl += '/' + val
            this.game = val
        }
    },
    computed: {
        url() {
            var url = this.baseUrl;

            if (this.bg.length) {
                url += '?bg=' + this.bg;
            }

             if (this.player.length) {
                url += '&player=' + this.player;
            }

            return url;

      }
    }

});

Что я мог здесь делаешь неправильно? Снова. Извините, я новичок в использовании vue. js, и я старался изо всех сил, чтобы предоставить столько же. Было бы здорово, если бы кто-нибудь, кто имеет опыт в keen-ui, тоже помог мне здесь.

1 Ответ

1 голос
/ 18 апреля 2020

Я думаю, что вы не используете переменную ga в data(). Просто исправьте это, и опции будут показаны в выпадающем списке.

data() {
        return {
            baseUrl: 'https://example.com/hive/stats/bedrock',
            game: '',
            ga: ['dr', 'wars', 'hide', 'murder', 'sg'],
            bg: '',
            player: ''
        }
    }

РЕДАКТИРОВАТЬ: В вашем вычисленном методе url вы можете добавить это:

if (this.game) {
  url += this.baseUrl + `/${this.game}`
}

и для директивы ui-select используйте :value.sync вместо метода 'v-model . Also if you need to listen to any changes then use @ input`.

:value.sync="game"

Обновлена ​​ссылка на кодовый блок с рабочим кодом: https://codepen.io/sudheer-ranga/pen/vYNKmLZ

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