如何在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 (将#修改为@）