微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在vuetify中默认选择<v-select>

如何解决如何在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 举报,一经查实,本站将立刻删除。