如何解决如何在vuetify中默认选择<v-select>
我有一个组件,其中有 ,它在ajax调用中添加了选项。当我选择任何选项时,它将发送另一个ajax调用。现在,我想在 中的加载选项之后选择第一个选项,它也应该发送该ajax调用,因为在进行ajax调用时我会渲染表。所有这些都应该在页面加载时发生,我该如何实现?
组件
<template>
<v-container fluid>
<v-row align="center">
<v-col cols="12" sm="6">
<v-select
v-model="selected"
:items="projects"
:menu-props="{ maxHeight: '400' }"
label="Select"
hint="Pick Project"
persistent-hint
@change="getTickets()"
v-bind:selected="$index === 0 ? 'selected' : false"
></v-select>
</v-col>
<v-col cols="12">
<v-card>
<v-card-title>
Tickets
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
show-select
item-key="name"
></v-text-field>
</v-card-title>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">ID</th>
<th class="text-left">Subject</th>
<th class="text-left">Priority</th>
<th class="text-left">Requester</th>
<th class="text-left">Type</th>
<th class="text-left">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.subject}}</td>
<td>{{ getPriority (item.priority) }}</td>
<td>{{ item.requester_id }}</td>
<td>{{ getType(item.type_id)}}</td>
<td>
<div class="my-2">
<Reply :ticket="item.id" :url="selected"></Reply>
</div>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-pagination
v-model="pagination.current"
:length="pagination.total"
@input="onPageChange"
></v-pagination>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../../config";
import AxiosPlugin from "vue-axios-cors";
import Reply from "./Reply";
Vue.use(AxiosPlugin);
export default {
data() {
return {
selected: [],e7: [],projects: [],loadingprop: true,selecteddatatable: [],search: "",headers: [
{ text: "ID",value: "id" },{ text: "Model",value: "model" },{ text: "Priority",value: "priority" },{ text: "Requester",value: "requester_id" },{ text: "Status",value: "status" },{ text: "Subject",value: "subject" },{ text: "Type",value: "type_id" },],desserts: null,pagination: {
current: 1,total: 0,},};
},components:{
Reply
},beforeMount() {
this.$axios.get(api.path("getProjects"),{}).then((res) => {
let project_array = [];
for (let i = 0; i < res.data.length; i++) {
project_array.push(res.data[i].url);
}
this.projects = project_array;
});
},methods: {
loadReplies(){
},getTickets() {
axios
.get(
this.selected +
"api/tickets/fetch_tickets?page=" +
this.pagination.current,{}
)
.then((response) => {
// console.log(res.data.data)
// this.desserts = res.data.data;
// this.loadingprop = false;
this.desserts = response.data.data;
this.pagination.current = response.data.current_page;
this.pagination.total = response.data.last_page;
console.log(response.data.data);
})
.catch((err) => {
this.handleErrors(err.response.data.errors);
})
.then(() => {
this.loading = false;
});
},onPageChange() {
this.getTickets();
},getPriority(priority) {
if (priority == 0) {
return "Low";
}
if (priority == 1) {
return "normal";
}
if (priority == 2) {
return "High";
}
if (priority == 3) {
return "Urgent";
}
},getType(type) {
if (type == 0) {
return "Question";
}
if (type == 1) {
return "Incident";
}
if (type == 2) {
return "Problem";
}
if (type == 3) {
return "Task";
}
},mounted() {
this.getTickets();
},};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。