dom 相关问题

我有一个 Vuetify v-data-table-server （文档），它通过从 API 获取数据来更新自身。我有一个 Vuetify v-data-table-server (docs)，它通过从 API 获取数据来更新自身。 <template> <v-data-table-server v-if="events.length > 0" v-model:items-per-page="events_limit" :headers="headers" :items-length="events_total" :items="events" :loading="loading" item-key="e_id" @update:options="loadItems"> <template #item.e_created_at="{ item }"> <event-date :initialDate="item.raw.e_created_at" /> {{ item.raw.e_created_at }} </template> <template #item.e_status="{ item }"> {{ item.raw.e_status }} </template> </v-data-table-server> </template> <script> import userService from "user.service"; import EventDate from "EventDate.vue"; export default { name: "Events", props: ["page"], computed: {}, components: { EventDate, }, data: () => ({ isLoading: false, isSuccess: false, events: [], events_offset: 0, events_limit: 10, loading: true, headers: [ { title: "Date", align: "start", sortable: true, key: "e_created_at", }, { title: "Result", align: "start", sortable: true, key: "e_status", }, ], }), mounted() { this.loadItems({ page: 1, itemsPerPage: 10 }); }, methods: { loadItems({ page, itemsPerPage, sortBy }) { this.loading = true; userService .get_events({ limit: itemsPerPage, offset: (page - 1) * itemsPerPage, sort_by: sortBy, }) .then( (response) => { this.events_total = response.events_total; this.events = response.events; this.loading = false; }, (error) => { console.log(error); } ) }, }, }; </script> 我还有一个 EventDate 组件，它只是格式化日期： <template> <div> <span>{{ formattedDate }}</span> </div> </template> <script> export default { name: "EventDate", props: { initialDate: { type: String, required: true, }, }, data() { return { date: "", }; }, computed: { formattedDate() { const dt = new Date(this.date); const day = dt.getDate().toString().padStart(2, "0"); const month = (dt.getMonth() + 1).toString().padStart(2, "0"); const year = dt.getFullYear(); const hours = dt.getHours().toString().padStart(2, "0"); const minutes = dt.getMinutes().toString().padStart(2, "0"); const seconds = dt.getSeconds().toString().padStart(2, "0"); return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`; }, }, created() { this.date = this.initialDate; // Set the initial date when component is created }, }; </script> 获取第一页时，一切看起来都很正常：组件显示格式化数据。但是当我跳转到另一个页面时，虽然我从 API 获得了正确的值，甚至在表格中看到了它们，但 EventDate 组件实例没有更新：我错过了什么？这是因为您每次都使用相同的页码- mounted() { this.loadItems({ page: 1, itemsPerPage: 10 }); }, 正如我所见，您将页码作为道具，因此请使用道具数据- mounted() { this.loadItems({ page: this.page, itemsPerPage: 10 }); }, 让我知道这是否有效。

vue.js dom vue-component vuetify.js

回答 1 投票 0

如何用JS删除<style>标签

我需要通过JS从html文件中删除完整的标签及其内容。我的想法是找到标签并通过检查其内容找到正确的标签。然后使用node.parentNode.removeChild(node)...

javascript html dom

回答 2 投票 0

如何使用javascript更改HTML元素的值？ [已关闭]

我正在创建一个计数器，我想增加、减少或重置0。我应该在事件监听器中写什么？ 0 我只尝试过使用 vari...

javascript dom event-listener

回答 1 投票 0

为什么setAtrribute和removeAttribute不起作用

App.js const ul = document.querySelector('ul'); const li = document.createElement('li'); ul.append(li); li.innerText = 'X 战警'; li.setAttribute('id', '主标题'); 索引.html ...

javascript html dom dom-manipulation

回答 1 投票 0

手机版页面页脚

美好的一天，移动版如何设置页面页脚？我在 DOM 不同位置进行了测试，但它不起作用。当我测试时，对于移动版本，我的页脚从移动设备上消失了

css dom mobile version footer

回答 2 投票 0

React 中的 Load 事件不起作用。如何制作页面加载器？

我正在尝试制作一个页面加载器，因此我制作了一个必须在窗口上添加加载事件的加载器组件，但它根本不起作用：从“react”导入React，{useEffect} 导入'./loader.sas...

javascript html reactjs dom browser

回答 1 投票 0

截止日期计数器在现实生活中不起作用

我正在写一个项目，应该从用户那里得到最后期限，并给现实生活中的最后期限留出时间，但我不知道我可以在现实生活中实现它。还需要使用 dom 然后添加这个。 ..

javascript html dom

回答 1 投票 0

有没有其他方法可以切换按钮以进行响应式设计，我的 javascript 代码无法使用此功能

下面是JS代码 document.addEventListener("DOMContentLoaded,"); consttoggleBtn = document.getElementById('toggle_btn'); const dropDownMenu = document.getElementById('dropdown_menu');

javascript html css dom responsive-design

回答 1 投票 0

dom 相关问题

最新问题