select coopera con v-for de vue para generar dinámicamente la opción basada en datos de fondo
Introduce la etiqueta de selección
<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>
Datos vinculantes
data() {
return {
selectItem: "",
robots:[],
robot:''
};
},
Enviar solicitud para obtener datos de antecedentes
Método 1: Solicitud directa de 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);
});
Método 2: enviar una solicitud a través de la acción de administración de estado de vuex,
store / modules / robot.js,
incluida la operación de asignación de robots de v-for, es diferente del método de envío de una solicitud en el primer método. El
resto del las operaciones son las mismas.
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,
}
});
Introducir accesorios relacionados para la gestión del estado de vuex
import { mapGetters, mapActions, mapState } from "vuex";
Parte del código js en el componente vue
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);
}
``