[Vuejs]-How to make a dynamic list using queue approach

by

0👍

✅

I allowed myself to make some extra changes, moreover, to give you an answer (I used the 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>

If that’s not what you meant, edit your question and try to describe it in a more pathological way.

Leave a comment