Vue JS。 Vueコンポーネントの中のランダムな位置にアイテムを挿入する

Question

私はLaravelを使ってプロジェクトを進めています。現在、ホームページにVue JSを使って機能を構築しています。そこでは、広告内の任意の位置に "Advertisement"を配置します。 は今、私は、セットアップ後、以下のテンプレートを使用して移入され、「パネル」と呼ばれるVUE成分を有する

<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); 
     }); 
     }, 
    } 
    }); 

現在、すべて正常に動作し、要求されたサーバーデータが表示されています。しかし、私の問題は、すでに表示されている要素の間に新しい項目を挿入することができないということです。 $（ '。item'）を実行しようとするとlengthが0を返すように見えるので、jqueryはDOM内のこれらの要素を表示していないようです。私がしようとしているのは、既に表示されているアイテムの合計長さを取得し、0で始まり、アイテムの全長で終わるランダムな数字を計算し、$（ 'item'）を使って新しいアイテムを挿入することです。 （randomDigit）.after（$（new-item））;を返します。

私はあなたにこれを手伝っていただければ幸いです。前もって感謝します！！！

Answer 1

Vueを使用しているときにjQueryを使用してdomを操作しないでください。 Vueはデータが変更されたときにdomを更新するため、挿入した要素に影響することがあります。 Vueにdomを処理させ、データを処理するほうがよいでしょう。このコードは、ランダムな位置で配列に項目を挿入します：

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

広告を処理するには、テンプレートを調整する必要があります。