如何根据响应数据更新 Vue 3 组件内容？答案

【问题标题】：How to update in Vue3 component content based on reponse data?如何根据响应数据更新 Vue 3 组件内容？
【发布时间】：2022-12-03 09:55:08
【问题描述】：

最近我一直在研究我的服务中的过滤器，以便在 .NET + Vue3 中预订酒店房间。

用于过滤的后端方法工作正常，但我不知道如何强制组件使用获取的数据更新其内容。

我正在接收格式如下的数据： enter image description here

这是我的脚本和组件文件：

过滤器组件：

<template>
    <div class="container">
        <div class="d-flex align-items-center">
            <label for="first_day" class="p-2">First day: </label>
            <input type="date" name="first_day" v-model="filtersOptions.FirstDay" />

            <label for="last_day" class="p-2">Last day: </label>
            <input type="date" name="last_day" v-model="filtersOptions.LastDay"/>
            <button type="submit" class="m-2 p-2" v-on:click="fetchFilteredRooms()">Search</button>
        </div>
    </div>
</template>

<script lang="ts">
import { useFilters } from '@/composables/useFilters';
    export default {
        setup(props: any, context: any) {
            const { filtersOptions, fetchFilteredRooms } = useFilters();

            return {
                filtersOptions,
                fetchFilteredRooms,
            }
        }
    }
</script>

过滤脚本：

import { ref } from 'vue';
import Consts from "@/consts";
import { useRooms } from './useRooms';

class FiltersOptions {
    FirstDay: any;
    LastDay: any;
};

const { Rooms } = useRooms();

export const useFilters = () => {
    const filtersOptions = ref<any>(new FiltersOptions());

    async function fetchFilteredRooms() {
        const filterRoomsAPI = Consts.API.concat(`rooms/search`)
        const headers = {
            'Content-type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Origin': `${filterRoomsAPI}`
        }

        fetch(filterRoomsAPI, {
            method: 'POST',
            mode: 'cors',
            credentials: 'same-origin',
            body: JSON.stringify(filtersOptions._value),
            headers
        })
        .then(response => response.json())
        .then((data) => (Rooms.value = data))
        .catch(error => console.error(error));
    }

    return {
        Rooms,
        filtersOptions,
        fetchFilteredRooms,
    }
}

房间组件：

import { ref } from 'vue';
import Consts from "@/consts";
import { useRooms } from './useRooms';

class FiltersOptions {
    FirstDay: any;
    LastDay: any;
};

const { Rooms } = useRooms();

export const useFilters = () => {
    const filtersOptions = ref<any>(new FiltersOptions());

    async function fetchFilteredRooms() {
        const filterRoomsAPI = Consts.API.concat(`rooms/search`)
        const headers = {
            'Content-type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Origin': `${filterRoomsAPI}`
        }

        fetch(filterRoomsAPI, {
            method: 'POST',
            mode: 'cors',
            credentials: 'same-origin',
            body: JSON.stringify(filtersOptions._value),
            headers
        })
        .then(response => response.json())
        .then((data) => (Rooms.value = data))
        .catch(error => console.error(error));
    }

    return {
        Rooms,
        filtersOptions,
        fetchFilteredRooms,
    }
}

房间脚本：

import { ref } from 'vue';
import Consts from "@/consts"

const headers = {
    'Content-type': 'application/json; charset=UTF-8',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Origin': `${Consts.RoomsAPI}`
}

export function useRooms() {
    const Rooms = ref([]);

    async function fetchRooms() {
        fetch(Consts.RoomsAPI, { headers })
        .then(response => response.json())
        .then((data) => (Rooms.value = data))
        .catch(error => console.log(error));
    }

    return {
        Rooms,
        fetchRooms,
    };
}

知道如何处理吗？

【问题讨论】：

请将数据显示为代码格式的文本，并添加更多文本来说明您的问题的详细信息。您在代码中的哪个位置尝试将数据输入前端以及存在哪些问题具体来说你在尝试吗？
我不是 JavaScript 编码方面的专家，但我想知道您的代码是否不尊重它们所拥有的函数的异步性。您似乎在异步代码有机会检索任何内容之前立即从 fetchFilteredRooms 和 useRooms 函数返回。但同样，我不是这方面的专家。也许您自己使用回调会对此有所帮助。
1. 我会那样做 2. 这个观点很好，我会看的
此 Google 搜索中的某些链接可能对您有所帮助：site:stackoverflow.com vue using asynchronous data
谢谢，我一定会检查它。 Rn 我在我的项目概念中发现了几个问题，所以可能需要一段时间

标签： asp.net vue.js vue-component vuejs3

【解决方案1】：

在 Vue3 中，您可以使用 $set 方法来更新响应式属性的值。您可以在提取请求的 then 回调中使用它来更新 useRooms 可组合项中的 Rooms 属性。下面是一个示例，说明如何更新 fetchFilteredRooms 方法来执行此操作：

import { ref } from 'vue';

export const useRooms = () => {
    const Rooms = ref<any>([]);

    async function fetchFilteredRooms() {
        // your existing code here
        .then((data) => {
            // use $set to update the Rooms property
            Rooms.$set(data);
        })
        .catch(error => console.error(error));
    }

    return {
        Rooms,
        fetchFilteredRooms,
    }
}

更新 Rooms 属性的值后，使用它的组件应自动更新以反映新数据。

为确保组件在 Rooms 属性更改时正确更新，您可以使用组件中的 setup 函数创建一个响应式属性来跟踪 Rooms 属性的值。以下是如何在 Rooms 组件中执行此操作的示例：

import { ref } from 'vue';
import { useRooms } from './useRooms';

export default {
    setup() {
        const { Rooms, fetchFilteredRooms } = useRooms();
        // create a reactive property that tracks the value of the Rooms property
        const rooms = ref(Rooms.value);

        return {
            rooms,
            fetchFilteredRooms,
        }
    }
}

现在，在您的组件模板中，您可以使用 rooms 属性来呈现数据。这是您如何做到这一点的示例：

<template>
    <div class="container">
        <div v-for="room in rooms" :key="room.id">
            {{ room.name }}
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import { useRooms } from './useRooms';

export default {
    setup() {
        const { Rooms, fetchFilteredRooms } = useRooms();
        const rooms = ref(Rooms.value);

        return {
            rooms,
            fetchFilteredRooms,
        }
    }
}
</script>

通过此更改，您的组件应在 Rooms 属性更改时自动更新。

【讨论】：