视频电商网站实战 - 构建视频提交页面(上)

1.构建视频提交页面，需要一个form表单，我们修改publish.vue视频发布组件：

<template>    <div>        <el-form :model="video"  label-width="100px" class="demo-ruleForm">            <el-col :span="12">                <el-form-item label="视频标题" prop="v_title">                    <el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>                </el-form-item>                <el-form-item label="视频分类" prop="v_class">                    <el-select v-model="video.v_class" placeholder="请选择">                        <el-option                            v-for="item in this.$store.state.res.NavBar"                            :label="item.nav_text"                            :value="item.nav_id"                        >                            {{item.nav_text}}                        </el-option>                    </el-select>                </el-form-item>            </el-col>            <el-col :span="12"></el-col>        </el-form>    </div></template><script>    export default{        data(){            return {                video:{                    v_title:'',                    v_class:2                },            }        },    }</script>

上面代码，select元素我们循环了item in this.$store.state.res.NavBar，这是我们之前导航栏的数据。我们查看一下页面效果：

视频分类默认选中了“健身”，是因为我们select元素的绑定了数据模型v-model="video.v_class"。

2.关于页面布局，因为我们用的是elementUI，都可以直接看文档。
这里我们再来学习一个Vuex的知识点Getters，视频分类有“首页、健身、饮食、私人定制”，我们这里想过滤掉“首页”。

来到ResModules.js 文件，这个模块就是我们处理导航数据的模块。

import Vue from 'vue';export default{    state:{        NavBar:[] //导航栏    },    mutations:{        //设置数据的方法        setData(state,{key,data}){            state[key] = data;        }    },    actions:{        //加载远程数据的方法        loadData(context,{url,key}){ //params是一个对象参数,里面包含url            Vue.http.get(url).then((rs)=>{                //alert(rs.body);                context.commit('setData',{key:key,data:rs.body});            },(rs)=>{                console.log('获取数据失败');            });        }    },    getters:{        navForVideoClass:state=>{            return state.NavBar.filter(item=>{                return item.nav_text != '首页';            })        }    }}

注意我们在getters里面写了一个navForVideoClass 方法，此方法最后返回的数据就没有“首页”这一项数据了。

3.我们视频分类选择处，还需要修改，来到publish.vue，之前我们是这样循环展示数据的：v-for="item in this.$store.state.res.NavBar，现在需要需用到用ResModules.js 中写的方法，应该修改为如下：

v-for="item in this.$store.getters.navForVideoClass"

这样循环展示出来的选择项，就没有“首页”了。