bugfix> javascript > 投稿

私はVue.jsが初めてです。

私は最初にこれを行う方法を探しました(配列内の要素のみを指定して配列から要素を削除します)が、見つかったのは delete への参照のみでしたメソッドまたは slice の呼び出しリストには...もちろん関連しますが、私の質問には答えません。

ここでフィドルを作りました:

https://jsfiddle.net/SumNeuron/d2a9j2mh/

理想的には、[削除]をクリックしてタブとタブペインを削除します。

リストを小道具として渡すことなくこれを行う方法はありますか?

回答 3 件
  • これはあなたの期待ですか:https://jsfiddle.net/ittus/Lost5djd/?

    [削除]ボタンをクリックするとイベントが発生します

     methods: {
        remove: function() {
          console.log(this, this.tab)
          this.$emit('remove', this.index)
        }
      }
    
    

    そして親コンポーネントでそれを聞きます

     methods: {
        onRemove(index) {
          this.groups =  [
           ...this.groups.slice(0, index),
           ...this.groups.slice(index + 1)
         ]
        }
      }
    
    

    各タブに id がある場合 、ソリューションはよりエレガントになります。

  • コンポーネントから親にイベントを発行することにより。 私はここでコードを分岐しましたリンクです https://jsfiddle.net/gfa3psg1

    エミッターを作成する

    var __emiter = new Vue();
    
    

    ボタンから放出

    __emiter.$emit('deleteTab', this.tab);
    
    

    アプリからキャッチ

    __emiter.$on('deleteTab', (group) => {
            this.groups = this.groups.filter(function(_group) {
                    return _group.title !== group.title;
                    });
        });
    
    

  • 私はあなたのjsfiddleをソリューションhttps://jsfiddle.net/budgw/eyxppq4j/1/で分岐させました

    最も簡単な方法は、 remove でイベントを使用することです  ボタン。このイベントはタブオブジェクトを保持し、次に親コンポーネント(ここではVueアプリケーション)がこのイベントをリッスンし、リストからタブを削除します。

    このようなイベントと小道具について考えるのが好きです。イベントは親コンポーネントにデータを与える方法であり、小道具は子にデータを与える方法です。

あなたの答え