Question

我正在使用Laravel开发一个项目，目前正在我的主页上使用Vue JS构建一个功能，我希望在其中添加一个＆＃34;广告＆＃34;在列表中的随机位置。现在，我已经设置了一个名为＆＃34; panel＆＃34;然后使用以下模板填充

<template id="places-template">
    <div v-for="item in items">
          <div class="item">
             ...
          </div>
      </div>
    </div> 
</template>

这就是它在我的javascript上看起来的样子（这是简化版），

Vue.component('panel', {
    template: '#places-template',

    data() {
      return {
        places: [],
      }
    },

    created() {
      this.getPlaces("{{ route('user::get-places') }}");
    },

    methods: {
      getPlaces(url) {
        this.$http.get(url).then((response) => {
         this.places.push(response.data);
        });
      },
    }
  });

现在一切正常并且正在显示请求的服务器数据。但我的问题是，我无法在已经显示的元素之间插入新项目。当我尝试做$（＆＃39; .item＆＃39;）。长度返回0显然，jquery似乎没有看到DOM中的那些元素。我打算做的是获取已经显示的项目的总长度，并计算一个以0开头的随机数字，并以项目的总长度结束，然后使用$（＆＃39; .item＆＃）插入一个新项目39;）当量（randomDigit）。经过（$（新项目））;

我希望你能帮助我。在此先感谢!!!

Answer 1

使用Vue时，应避免使用jQuery来操作dom。由于Vue在数据更改时更新dom，因此可能会影响您插入的元素。让Vue处理dom更好，你只需要处理数据。此代码会在随机位置将数据插入数组中：

this.places.splice(Math.floor(Math.random()*this.places.length), 0, foo);

您需要调整模板来处理广告。

Vue JS。在Vue组件内的随机位置插入一个项目

1 个答案: