リスト全体のデータを一度に保存してから1つずつ表示する、または1つのdivのHTMLコンテンツを変更する

Question

ビデオが少なく、ボタン、ビデオタイトルがある「vue.js」を使用してアプリケーションを作成していますユーザーがボタンをクリックすると、関連するビデオ、タイトル、説明のみが表示されますが、他のすべてのビデオのビデオタイトルと説明は非表示になります。これを行うには2通りの方法があります： 1.すべてのビデオタイトルと説明のリストをデフォルトの表示プロパティでnoneにしてから、ディスプレイプロパティを1つのビデオタイトルとボタンクリックに関する説明のみをブロックするように変更します。 EXのために：

onBtnClick: function(event, index) { 
 
    var videoContainer = "#videoContainer" + index; 
 
    $(videoContainer).css("display", "block); 
 
    }

.container { 
 
    display: none; 
 
}

<div v-for="(video, index) in json._videos" id="'videoContainer'+index" class="container"> 
 
    <div v-if="video.title">{{ video.title }}</div> 
 
    <div v-if="video.decription">{{ video.decription }}</div> 
 
</div> 
 

 
<div id="buttonContainer"> 
 
    <button v-for="(video, index) in json._videos" id="'button'+index" v-on:click="onBtnClick($event,index)">{{ video.buttonText }}</button> 
 
</div>

は 単一のビデオ容器を作成した後、V-HTMLディレクティブを使用して、ビデオタイトルおよび説明のHTMLコンテンツを変更することにより

。例の場合：

onBtnClick: function(event, index) { 
 
    getVideoTitle(index); 
 
    getVideoDescription(index); 
 
} 
 

 
getVideoTitle: function(index) { 
 
    return json._videos[index].title; 
 
} 
 

 
getVideoDescription: function(index) { 
 
    return json._videos[index].description; 
 
}

.container { 
 
    display: none; 
 
}

<div id="'videoContainer'+index" class="container"> 
 
    <div v-if="json._videos" v-html="getVideoTitle()"></div> 
 
    <div v-if="json._videos" v-html="getVideoDescription()"></div> 
 
</div> 
 

 
<div id="buttonContainer"> 
 
    <button v-for="(video, index) in json._videos" id="'button'+index" v-on:click="onBtnClick($event,index)">{{ video.buttonText }}</button> 
 
</div>

Guysは、より良いアプローチと理由である1を教えてください？

Answer 1

次の2つのVueのコンポーネントを作成することができます。

ビデオコンポーネントでは、指定されたビデオコンポーネントのVideoListコンポーネントから設定される属性「isVisible」（または必要に応じて他の名前）を設定する必要があります。

このアプローチでは、ロジックを分離することができ、すべての単一のビデオとそのようなビデオのすべてのセットを完全に制御できます。

あなたは、任意のソースからあなたの日付を取得することができ、それは問題ではない：作者のコメント上 https://jsfiddle.net/yh1xrk27/22/

var VideoList = Vue.component('video-list', { 
    template: $('#video-list').html(), 
    data: function() { 
     return { 
      videos: [ 
      ] 
     }; 
    }, 
    mounted: function() { 
     this.videos = [ 
      { 
       title: 'Video 1', 
       description: 'The first video', 
       isVisible: true 
      }, 
      { 
       title: 'Video 2', 
       description: 'The second video', 
       isVisible: false 
      } 
     ]; 
    }, 
    methods: { 
     show: function (index) { 
      var self = this; 
      for (var key in this.videos) { 
       this.videos[key].isVisible = (key == index); 
      } 
     } 
    } 
}); 

var VideoItem = Vue.component('video-item', { 
    template: $('#video-item').html(), 
    props: [ 
     'fields' 
    ], 
    data: function() { 
     return { 
      title: '', 
      description: '', 
      isVisible: false 
     }; 
    }, 
    created: function() { 
     this.title = this.fields.title; 
     this.description = this.fields.description; 
     this.isVisible = this.fields.isVisible; 
    } 
}); 

var demo = new Vue({ 
    el: '#app' 
}); 

回答：

はここで完全な実施例です。

また、すべての単一のビデオにすべてのフィールドを定義する必要はありません。 VideoItemの各フィールドにはデフォルト値がありません。プロパティのフィールドに属性を割り当てる場合は、すべてのフィールドの定義を確認するだけです。たとえば、次のように

この置き換え：この上に

created: function() { 
    this.title = this.fields.title; 
    this.description = this.fields.description; 
    this.isVisible = this.fields.isVisible; 
} 

：

created: function() { 
    this.title = typeof this.fields.title !== 'undefined' ? this.fields.title : 'SOME_DEFAULT_VALUE'; 
    this.description = typeof this.fields.title !== 'undefined' ? this.fields.description ? 'SOME_DEFAULT_VALUE'; 
    this.isVisible = typeof this.fields.title ? this.fields.isVisible : false; // or true, depends on you 
} 

それとも、動画についてのデータを設定するための別の方法を作成し、コンポーネントVideoListのcreatedフックでこのメソッドをコールすることができます：

methods: { 
    ... 
    setData: function(){ 
     this.title = typeof this.fields.title !== 'undefined' ? this.fields.title : 'SOME_DEFAULT_VALUE'; 
     this.description = typeof this.fields.title !== 'undefined' ? this.fields.description ? 'SOME_DEFAULT_VALUE'; 
     this.isVisible = typeof this.fields.title ? this.fields.isVisible : false; // or true, depends on you 
    } 
} 

あなたのVideoListコンポーネントでは、社内外のリソースから、どこからでもビデオを見ることができます。たとえば：

created: function(){ 
    var self = this; 

    $.ajax({ 
     // load data from some internal resource or paste some external resource link 
     url: '/source/videos.json', 
     dataType: 'json', 
     success: function(jsonData){ 

     // call setData method of this component 
     self.setData(jsonData); 
     }, 
    }); 
} 

だから、あなたはJSONについての制限を持っていない、あなたは生のJSONデータをやりたいとVideoList部品に貼り付け、それがすべてです。

Answer 2

もう1つの変数を提案し、dataのvueオプションを使用し、動画のデータ変数を設定します。利点は、複数の場所で同じ変数を使用でき、それも反応的であることです。つまり、その変数の変更がビューに反映されます。

data:{ 
    return videos: [] 
} 
methods: { 
    onBtnClick: function(event, index) { 
    updateVideoTitle(index); 
    updateVideoDescription(index); 
    } 

    updateVideoTitle: function(index) { 
    this.videos[index] = Object.assign(this.videos[index], {title: json._videos[index].title}); 
    } 

    updateVideoDescription: function(index) { 
    this.videos[index] = Object.assign(this.videos[index], {description: json._videos[index].description}); 
    } 
} 

とHTMLで

は：VideoListとシングルビデオ：

<div v-for="(video, index) in videos" id="'videoContainer'+index" class="container"> 
    <div v-if="video.title">{{ video.title }}</div> 
    <div v-if="video.decription">{{ video.decription }}</div> 
</div> 

<div id="buttonContainer"> 
    <button v-for="(video, index) in videos" id="'button'+index" v-on:click="onBtnClick($event,index)">{{ video.buttonText }}</button> 
</div>