时间戳

首页 > 解决方案 > 如何使用队列方法制作动态列表

javascript - 如何使用队列方法制作动态列表

问题描述

我正在处理 vue.js 呈现动态列表，当用户单击按钮时，相应输入字段中的链接会呈现，然后我再次将链接粘贴到输入字段中并单击添加它会将值添加到我没有的第二个索引'不想让我知道我有使用queue概念，但在 ui 上我不知道如何实现它

我做了什么

new Vue({
  el: '#app',
  data() {
    return {

      anchorTags: [{
        url: '',
        value: ''
      }]

    }

  },
  methods: {

    validateYouTubeUrl() {

      var url = document.getElementById('youtubeUrl').value

      this.anchorTags.push({
        url: url,
        value: url
      });

    }

  }
})
.as-console-wrapper { max-height: 3em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id=app>
  <div class="container-fluid row">

    <div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">

      <div class="input-group">
        <input type="text" class="form-control" id="youtubeUrl" placeholder="Paste link here...">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" @click="validateYouTubeUrl">Add</button>

        </div>
      </div>
      <hr>

    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
      <h3 class="form-control">Playlist</h3>
      <hr>


      <ul class="list-group">
        <li v-for="(anchorTag, k) in anchorTags" :key="k" class="list-group-item">
          <a :href="anchorTag.url" @click.prevent="playVideo($event)">{{anchorTag.value}}</a>
          <span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
        </li>
      </ul>
    </div>
  </div>
</div>

所以我想做的是

像 FIFO 这样的 quee 那样做，当我输入一些东西时，它在顶部，我再次输入最新的东西应该在顶部

标签： javascripthtmlvue.js

解决方案

此外，我允许自己进行一些额外的更改，以便给您一个答案（我使用了v-model）：

new Vue({
  el: "#app",
  data() {
    return {
      youtubeUrl: null,
      anchorTags: []
    };
  },
  methods: {
    validateYouTubeUrl() {
      this.anchorTags.push({
        url: this.youtubeUrl,
        value: this.youtubeUrl
      });
    }
  },
  computed: {
    anchorList() {
      return this.anchorTags.slice().reverse();
    }
  }
});
.as-console-wrapper {
  max-height: 3em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=app>
  <div class="container-fluid row">
    <div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
      <div class="input-group">
        <input type="text" class="form-control" v-model="youtubeUrl" placeholder="Paste link here...">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" @click="validateYouTubeUrl">Add</button>
        </div>
      </div>
      <hr>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
      <h3 class="form-control">Playlist</h3>
      <hr>
      <ul class="list-group">
        <li v-for="(anchorTag, k) in anchorList" :key="k" class="list-group-item">
          <a :href="anchorTag.url" @click.prevent="playVideo($event)">{{anchorTag.value}}</a>
          <span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
        </li>
      </ul>
    </div>
  </div>
</div>

如果这不是您的意思，请编辑您的问题并尝试以更病态的方式描述它。

推荐阅读