javascript - 如何从选择下拉列表中添加项目 - eager-ui

Question

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

现在，我在使用 eager-ui 进行选择下拉菜单时遇到问题。我想要实现的是有一个功能下拉菜单，可以让用户选择游戏模式，选择后，它将添加查询字符串。

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

• “dr”是一个选择选项
• “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>

自定义.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 的新手，我已尽力提供尽可能多的内容。如果也有在 eager-ui 方面有经验的人来帮助我，那就太好了。

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。另外，如果您需要监听任何更改，请使用@input`方法。

:value.sync="game"

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