1

私はVueが初めてです。Vue.js Javascript ファイルで、DOM からアイテムを削除できません。データベースから特定のレコードを削除する ajax ポスト リクエストを作成することに成功しました。

削除したら、DOM から削除する必要があるため、同じページをリロードする必要なしに買い物をすることはありません。

jQueryではできるのですが、実際にVue.jsではどのようにすればいいのでしょうか?

コードの私の部分は次のとおりです。

// SOME CODE BEFORE ...

onSubmit: function(e){
    e.preventDefault();

    $tablerow = this.el.parentNode.parentNode;

    // Assign a correct submit request type and url
    this.vm
        .$http[this.getRequestType()](this.el.action)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this))
    ;
},

onComplete: function(){

    // Remove the item from a DOM  <<< I NEED TO REMOVE PARENT <tr/> ELEMENT
    $(this.el).closest('tr').fadeOut(300, function(){
        this.remove();
    });

    // If complete message exists, use it as a feedback
    if(this.params.complete){
        alert(this.params.complete);
    }
},

// SOME CODE AFTER ...

何か提案はありますか？私の質問がばかげている場合は申し訳ありませんが、私はプログラミングについて十分な知識がありません。

4

1 に答える 1

3

通常、配列に格納されているテーブル行に v-for で表示しているアイテムのリストがあります。ajax 呼び出しの後、this.items.$remove(item) を使用してこのアイテムを削除できます。DOM で表示されている場所から自動的に削除されます。

テンプレートを表示しなかったので、あなたがやろうとしていることと同様のシナリオを再現しようとします

data: function(){
   return {
       items: ['item1','item2','item3']
   }
},

methods: {
    remove: function(item){
        ajaxCall.then(function(){
            this.items.$remove(item);//will remove the <tr> from the DOM 
        });
    }
}

テンプレートは次のようになります

<tbody>
  <tr v-for="item in items" v-on:click="remove(item)">{{ item }}</tr>
</tbody>
于 2016-03-16T19:47:43.983 に答える