selectはvueのv-forと連携して、バックグラウンドデータに基づいてオプションを動的に生成します

selectはvueのv-forと連携して、バックグラウンドデータに基づいてオプションを動的に生成します

選択タグを導入します

 <select
              class="robot"
              @change="switchLang($event)"
              v-model="selectItem"
            >
              <option v-for="(robot,index) in robots"  :key="index" :label="robot.name" :value="robot.name"></option>
            </select>

バインディングデータ

  data() {
    return {
      selectItem: "",
      robots:[],
      robot:''
    };
  },

バックグラウンドデータを取得するためのリクエストを送信する
方法1：直接axiosリクエスト

 this.$axios
      .get("/api/app/robot", {
        params: {
          Sorting: " ",
          SkipCount: 0,
          MaxResultCount: 100,
        },
        headers: {
          Authorization: "Bearer " + sessionStorage.access_token,
        },
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error);
      });

方法2：vuex状態管理の作用を介して要求を送信する
店舗/モジュール/ robot.js、
。第一の方法で要求を送信する方法とは異なる、V用のロボットの割り当て動作を含むが
、残りの操作は同じです。

import axios from 'axios';
// store.state
const state = {
    robot: {},
};

const getters = {
    allRobot: state => state.robot,
};

const actions = {
    async getRobot({ commit } ) {
        const response = await axios.get( '/api/app/robot',{params:{
          'Sorting':' ',
          'SkipCount':0,
          'MaxResultCount':100
        },
        headers: {
          Authorization: "Bearer " + sessionStorage.access_token,
        }
      });
        // console.log(response.data.items)
        commit('setRobot', response.data);
    },
};
const mutations = {
  setRobot: (state, robot) => (state.robot = robot),
};
export default {
    state,
    getters,
    actions,
    mutations
};

store / index.js

import Vuex from 'vuex';
import Vue from 'vue';
import robot from './modules/robot'
// Load Vuex
Vue.use(Vuex);

// Create store
export default new Vuex.Store({
  modules: {
    robot,
  }
});

vuex状態管理用の関連アクセサリを紹介します

import { mapGetters, mapActions, mapState } from "vuex";

vueコンポーネントのjsコードの一部

 methods: {
      ...mapActions(["getRobot"]),
    ...mapGetters(["allRobot"]),
      switchLang(e) {
      // console.log(e.target.value);
      for(var i=0 ; i<this.robots.length ; i++){
        if(e.target.value ==this.robots[i].name) {
          //发请求  获取机器人的动态   状态信息
          console.log(this.robots[i])
        }
      }
      // console.log(this.robots)
    },
 },
   computed: {
        ...mapState(["robot"]),
  },
  created(){
       this.$store.dispatch("getRobot");   
  },
  mounted() {
   setTimeout(() => {
    //  console.log(this.$store.getters.allRobot)
      this.robots = this.$store.state.robot.robot.items
      this.selectItem = this.robots[0].name
      // console.log(this.robots)
   }, 500);
   }
``