立即将整个数据保存在列表中，然后一个一个一个一个或更改单个Div的HTML内容

Question

我正在使用" vue.js"创建一个应用程序，其中很少有视频，并且每个视频都有一个按钮，视频标题和视频说明，因此当用户单击时它只会显示相关视频，标题和描述的按钮，但是所有其他视频的视频标题和描述都将被隐藏。现在有两种方法：1.通过创建所有视频标题和默认显示属性的描述的列表，然后将显示属性更改为单击按钮上的一个视频标题和描述的块。for 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>

2. 通过创建单个视频容器，然后使用V-HTML指令更改视频标题和描述的HTML内容。for ex：

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>

伙计们请告诉我哪一种是更好的方法，为什么？

Answer 1

您可以创建两个VUE组件：视频师和单个视频。

在您的视频组件中，您应该具有属性"可见"（或其他名称，如果需要），将从specifig视频组件的视频师组件中设置。

这种方法授予您可以分开逻辑并为每个视频和所有此类视频提供完全控制的能力。

这是一个完整的工作示例：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中的每个字段都有DEAFULT值，当您从属性"字段"分配属性时，您应该只检查每个字段的定义。例如：

替换此：

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
}

或者您可以创建单独的方法来设置有关视频的数据，并在组件视频师的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
    }
}

和您的视频师组件中，您可以从内部或外部资源中加载有关视频的信息。例如：

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没有任何限制，使用RAW JSON数据做您想做的事并将其粘贴到Videolist组件中，仅此而已。

Answer 2

我会建议一个变量，使用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：

<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>