如何从选择下拉列表中添加项目 - 敏锐的用户界面

Question

我正在制作一个动态表单，它可以让用户使用 vue.js 自动生成带有游戏统计信息的图像，并且它利用了 Keen-ui。我是 vue.js 的新手，过去 2 周开始学习它。

现在，我遇到了一个关于使用热衷 UI 的选择下拉菜单的问题。我试图实现的是具有功能下拉列表，将让用户选择游戏机和选中后，它将添加查询字符串。

例如： https://example.com/hive/stats/bedrock/dr?bg=dark&player=ntmnathan

• “博士”是一个选择选项
• “bg”是一个选择选项
• “播放器”是文本框输入。

不幸的是，选择下拉菜单对我不起作用，我在所有这些中都使用了文本框输入，它们似乎工作完美并添加到链接中。

演示：https://codepen.io/Nathantominecraft/pen/RwWRVPZ

index.html

      <div class="card-body" id="bedrockstatscard">

    <ui-select has-search label="Hive Gamemode" placeholder="Select a HiveMC Gamemode" v-model="game" :options="ga" @query-change="checkEvent"></ui-select>

      <ui-textbox label="Background" name="bg" validation-rules="required" :value.sync="bg" placeholder="dark, light, gamecode"></ui-textbox>

      <ui-textbox label="Player Username (Xbox Gamertag)" name="player" validation-rules="required" :value.sync="player" placeholder="NTMNathan"></ui-textbox>

    <div class="preview">
      <ul>
        <li>Image URL: <a :href="url"><span v-text="url"></span></a></li>
      </ul>

        <div class="preview-image">
          <img class="img-fluid" alt="Image will preview here." :src="url" onerror="this.src='https://i.imgur.com/5IC3llP.png';"/>
        </div>
    </div>
      </div>
    </div>
  </div>

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 的新手，我已尽力提供尽可能多的内容。如果有谁也有经验，也可以在这里给我提供帮助，那就太好了。

Answer 1

我认为您没有在data() 中使用ga 变量。只需更正它，选项就会显示在下拉列表中。

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"

使用工作代码更新了 codepen 链接： https://codepen.io/sudheer-ranga/pen/vYNKmLZ