Requirements: 1: The title bar of ‘XXXX’ in the navigation bar of the head displays the drop-down menu. 2: Select the data in the drop-down menu and display the data to the specified position on the page. 3: Click the data at the output, invoke the interface, request the data and display the data

Vuex is used because the header bar, the location of the output data, and the interface to call after clicking the output are not in the same VUE file

The code:

Vue <template> <! - 1: The "XXXX" title bar in the head navigation bar displays the drop-down menu, <div class="headerData"> <div class="card" @click="change(item,index)" v-for="(index,item) in fliterheaderData" :key="index" > <span>{{item.name}}</span> </div> <div class="selectData" v-show="showSelectFlag"> <ul> <li @click="selectItem(item,index)" v-for="(index,item) in selectData" :key="index">{{item.name}}</li> </ul> </div> </div> </div> </template> <script> export default { data(){ FliterheaderData: [{name: 'heading 1', id: 1}, {name: '2' title, id: 2}, {name: 'title 3, id: 3}]. SelectData: [{name: 'option 1', id: 1}, {name: 'option 2, id: 2}, {name:' option 3, id: 3}]}, the methods: {// Submit drop-down data selectItem(item,index){this. codestore.com MIT ('SET_SELECT',item.name); ShowSelectFlag = false}},} </script>Copy the code
// vuex-----index.js import Vue from 'Vue '; import Vuex from 'vuex'; Vue.use(Vuex) export default new Vuex.Store({ state:{ selectDataItem:"" }, mutations:{ SET_SELECT(state,selectDataItem){ state.selectDataItem = selectDataItem } }, actions:{ stateSelect({commit},selectDataItem){ commit('SET_SELECT',selectDataItem) } } })Copy the code
// Select the drop-down menu data, // 2. Vue <template> <div> <el-select V-model ="value" placeholder=" please select "> <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> </template> <script> import {mapActions} from 'vuex' export default {computed:{selectList(){ And two content (the location of the echo is a drop-down box) let selectArr = [this. $store. State. SelectDataItem, "1" data, "2" data] selectArr. Concat (enclosing oldArr) return selectArr } }, data() { return { oldArr:[] }; }, methods: { ... mapActions(['selectDataItem']) }, }; </script>Copy the code

So far, the data shows success; Here are additional requirements that are not normally used

// Click on the data in the output, call the interface, and request the data, render the resulting data // first, The position of the echo data is a drop-down box first / / so you don't change according to the index judging location if (index = = = 0) {/ / judgment on the echo data is which the if (this. $store. State. SelectDataItem = = = 'option 1') { / / call interface} the if (this. $store. State. SelectDataItem = = = 'option 2') {/ / call interface} the if (this. $store. State. SelectDataItem = = = 'option 3) {/ / call interface }}Copy the code

I hope to help my friends. Tomorrow is May Day. I wish you all a happy holiday