vuejs2 相关问题

从 VueJS 中的组件模板打开 Vuetify 对话框

我正在使用 VueJS Vuetify 框架，我需要打开一个对话框 - 从另一个模板作为组件模板导入。单击 App.vue 中的菜单按钮后，模态框应该...

Vuetify <v-data-table>自定义<th>标题

我正在使用 Vuetify 。 如何在表格标题上添加按钮？ 这段代码是我到目前为止所尝试过的。 我正在使用 Vuetify <v-data-table>。 如何在表格标题上添加按钮<th>？ 这段代码是我迄今为止尝试过的。 <v-data-table v-model="selected" :headers="headers" :items="desserts"> <template slot="items" slot-scope="row"> <th><button>button</button></th> </template> </v-data-table> <script> export default { data:() =>({ headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: true, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], }); </script> 请帮忙。 您可以使用header.<fieldname>插槽模板。 例如，要定位第二列，calories: <v-data-table v-model="selected" :headers="headers" :items="desserts"> <template v-slot:header.calories="{ header }"> {{ header.text }} <v-btn>Button</v-btn> </template> </v-data-table>

VueJS中如何获取v-textarea的selectionStart和selectionEnd属性？

我知道你可以通过在VueJS中使用DOM或$refs来获取普通的startSelection和selectionEnd属性。 然而，我正在努力完成同样的事情<v-textarea...</desc> <question vote="0"> <p>我知道你可以通过在VueJS中使用DOM或$refs来获取普通<pre><code><textarea></code></pre>的startSelection和selectionEnd属性。</p> <p>然而，我正在努力用 <pre><code><v-textarea></code></pre> 完成同样的事情。我用谷歌搜索了一下，大多数东西要么使用普通的 JS 与 <pre><code><textarea></code></pre> 或 VueJS，但也使用 <pre><code><textarea></code></pre>。</p> <p>示例代码：</p> <pre><code> <v-textarea :value="value" :label="label" hide-details="auto" :name="name" auto-grow no-resize clearable rows="1" @input="emitSelectedPositons" :error-messages="errorMessages" ref="vta" /> ... <script> .... methods: { emitSelectedPositons() { this.$emit('changed', { start: this.$refs.vta.selectionStart, end: this.$refs.vta.selectionEnd }) } } </script> </code></pre> <p>上面的代码对于两者都返回 <pre><code>undefined</code></pre>。</p> </question> <answer tick="true" vote="1"> <p><pre><code>$refs.vta</code></pre> 仅返回 v-textarea 元素，它是一个包含其自己的引用的包装元素，其中包括内部 <pre><code><textarea></code></pre> 输入元素。您可以访问内部元素来获取选择开始和选择结束，如下所示：</p> <pre><code>this.start = this.$refs.vta.$refs.input.selectionStart; this.end = this.$refs.vta.$refs.input.selectionEnd; </code></pre> <p><a href="https://codepen.io/yoduh/pen/LYBbgOX?editors=1011" rel="nofollow noreferrer">沙盒示例</a></p> </answer> <answer tick="false" vote="0"> <p>随着 Vuetify 升级到 <strong>Vuetify 3</strong>，<pre><code>this.$refs.vta.$refs.input.selectionStart</code></pre> 不再起作用。</p> <p>以下是如何访问 v-textarea 的选择开始</p> <pre><code>this.$refs.vta.$el.querySelector('textarea').selectionStart </code></pre> </answer> </body></html>

在 Vue 中使用具有动态属性的媒体查询

所以我的一个页面总是有一个 Div，其背景图像会根据媒体查询而变化（例如，我从手机上的 CDN 获取较小的分辨率）。 现在，自从我在页面上获取图像 URL

v-bind 不适用于 v-tabs 我必须使用 v-model

我正在使用 vuetify 组件，并将默认显示设置为第 2 页（学生），但是当我单击第二个选项卡教授（第 1 页）时，什么也没有发生。 当我用 v-model 改变 :value 时，它......

组件导入错误 - Vue 2 与 TypeScript - VS Code

有没有人遇到过 TS 指向导入到 .vue 文件的自定义组件错误的问题 - 使用 options api 和 webpack。 基本上导入工作正常，一切都可见并且......

Vue.js 中的简单多步骤表单。添加课程

这是一个用 Vue.js 编写的简单的多步骤表单。如何修改代码以在出现错误时将“错误”类添加到“输入文本”。我将非常感谢你的帮助。 ...

Vue2-Dropzone为每个上传的文件添加点击事件

我正在通过 CDN 使用 Vue.js 2.4.14 和 vue2-dropzone。 我正在通过 CDN 使用 Vue.js 2.4.14 和 vue2-dropzone。 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vue2-dropzone/dist/vue2Dropzone.min.css"> 这是我在组件中的 vue-dropzone： <vue-dropzone ref="myVueDropzone" :options="dropzoneOptions"></vue-dropzone> 上传文件后，它会出现在拖放区中，如下所示： 我想在点击上传的文件预览时触发一个事件，目的是在新的浏览器选项卡中打开文件预览。 如何将点击侦听器附加到上传到 dropzone 组件的所有文件预览？ vue2-dropzone 不提供点击事件，但您可以创建自己的点击事件。当 vdropzone-file-added 事件触发时（每当将文件添加到拖放区时都会发生这种情况），您可以使用它来添加单击事件侦听器 <vue-dropzone ref="myVueDropzone" :options="dropzoneOptions" @vdropzone-file-added="added"> </vue-dropzone> added(file) { if (file.previewElement) { // get details overlay element that appears when hovering a thumbnail const detailsElement = file.previewElement.querySelector('.dz-details'); // add click listener to it detailsElement.addEventListener('click', () => { this.fileClick(file); }); } }, fileClick(file) { const url = URL.createObjectURL(file); window.open(url); }

VueJS 换行符未正确渲染

我遇到了以下问题，我从包含换行符的API读取数据字符串 我想在我的模板中正确显示它们。 但是当我做类似的事情时： {{米... 我遇到了以下问题，我从包含换行符\n的API读取数据字符串，我想在我的模板中正确显示它们。 但是当我做类似的事情时： <p>{{ mytext }}</p> 文本与普通文本一样显示有 \n 字符。 响应中的文本字符串的格式为"Hello, \n what's up? \n My name is Joe"。 我在这里做错了什么？ 甚至不是 vue 问题，您可以简单地使用 CSS 并将 white-space: pre; 应用于内容。您不需要为此额外的软件包。 new Vue({ el: '#app', data: { text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n' } }) .pre-formatted { white-space: pre; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script> <div id="app"> <div class="pre-formatted">{{ text }}</div> </div> 使用 <pre></pre> 标签来 pre 提供 pre 格式化文本。更多信息MDN 预标记文档 new Vue({ el: '#app', data: { text: 'Hello, \n what\'s up? \n My name is Joe' } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script> <div id="app"> <pre>{{ text }}</pre> </div> 我面临着与我使用的相同的问题vue-nl2br 检查这里 安装 npm install --save vue-nl2br 用法 import Nl2br from 'vue-nl2br' Vue.component('nl2br', Nl2br) 查看 <nl2br tag="p" :text="`myLine1\nmyLine2`" /> 结果： <p>myLine1<br>myLine2</p> 这是将字符串拆分为多个 <div> 元素的解决方案。 我也将其与 i18n 插件一起使用，我喜欢它，因为我不需要接触 CSS。 new Vue({ el: '#app', data: { text: ['Hello Vue.','This is a line of text.','Another line of text.',''] } }) .pre-formatted { white-space: pre; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script> <div id="app"> <div v-for="text of text">{{ text }}</div> </div> 我有同样的问题，我使用 CSS 来解决它。 new Vue({ el: '#app', data: { yourText: 'Lorem ipsum dolor sit amet, \n consectetur adipiscing elit, \n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n \n Ut enim ad minim veniam, \n quis nostrud exercitation ullamco' } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <p id="app" style="white-space: break-spaces">{{yourText }}</p>

在 vue-test-utils 中测试拖放用户操作

我想测试 DOM 元素上拖放的用户交互。 Vue test utils 提供了接受 eventType（例如点击）作为参数的触发方法。包装器.find('#someId').

v-text-field type=date：限制未来日期

我看过很多关于如何使用 v-date-picker 限制未来日期的帖子，但是如何使用具有日期类型的 v-text-field 做同样的事情呢？我不想添加 v-date-picker bc

Vue.js 组合 API 中的 `created()` 相当于什么？

您能否建议一下新的 Vue 组合 API 中的created() 的等价物是什么，我在 Vue2 中使用它，如下所示： 从'@vue/composition-api'导入{reactive, toRefs}

如何修复错误：未实现：导航（哈希更改除外）

我正在对包含 window.location.href 的文件实施单元测试，我需要检查它。 我的笑话版本是22.0.4。当我在节点版本 >=10 上运行测试时一切都很好 但我明白了

Vue.js 与 TypeScript - 获取 ref 子组件的类型

我的父组件有一个子组件，该子组件通过传递给它的引用进行调用： 现在，我想从父组件运行 ch 内的函数...

非标准元素未出现在 <head>

我正在使用 vue-meta: ^2.4.0 来填充我的 Nuxt 站点的 。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我想要 我正在使用 vue-meta: ^2.4.0 填充我的 Nuxt 网站的 <head>。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我希望 <nonstandard href="${process.env.SOME_VALUE_FROM_ENV}"> 位于 <head> 中，但它永远不会出现，即使我用一个简单的值对其进行硬编码。不支持非标准元素吗？ 我的nuxt.config.js如下： module.exports = { head: { // works htmlAttrs: { lang: 'en' }, // works link: [ { rel: 'shortcut icon', href: '/images/favicon.ico', type: 'image/ico' } ], // works meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' } ], // NONE OF THESE APPROACHES WORK nonstandard: [ { href: '${process.env.SOME_VALUE_FROM_ENV}' }, { innerHTML: `href="${process.env.SOME_VALUE_FROM_ENV}"` } ], innerHTML: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}" />`, // works script: [ { innerHTML: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','xxxxxxxxxxx'); ` } ], // works noscript: [ { innerHTML: ` <iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxxxxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe> `, pbody: true } ], __dangerouslyDisableSanitizers: ['script', 'noscript', 'nonstandard'], } } 按照 @DengSihan 的建议，我能够通过自定义 app.html 填充该值，该值是我作为 nuxt.config.js 文件的同级文件创建的。 <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} <nonstandard href="{{ ENV.SOME_VALUE_FROM_ENV }}"> </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> 在我的nuxt.config.js： module.exports = { env: { SOME_VALUE_FROM_ENV: process.env.SOME_VALUE_FROM_ENV } } 由此我们可以得出结论，vue-meta无法用非标准元素填充头部，必须使用自定义的app.html来代替。不知道为什么这个问题被否决了。这是一个独特的案例。

如何在我现有的 Vue2 项目中清楚且单独地使用 vuetify 中的组件

我有一个项目，致力于 Laravel 和 Vue2。我想在项目的特定部分使用 Vue 插件 Vuetify 中的一些材质组件。首先，我在我的

在 HTML5 中找不到此媒体类型 = video/mpeg 的兼容源

所以我尝试使用 vue-video-player 在我的模态上制作视频播放器，所以下面是我的 ModalDetailMediaVideo.vue 的模板代码 所以我尝试使用 vue-video-player 在我的模态上制作视频播放器，所以下面是我的 ModalDetailMediaVideo.vue 的模板代码 <template> <div @keydown.esc="modalClosed()" @click="modalClosed()" class="modal fade" id="modalMediaVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg justify-content-center"> <div class="layout-video"> <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > </video-player> </div> </div> </div> <script> import { videoPlayer } from 'vue-video-player'; export default { props: { videoSource: { type: Array, default: function() { return []; } } }, components: { videoPlayer }, data () { return { playerOptions: { mute: true, controls: true, controlBar: { timeDivider: false, durationDisplay: false }, sources: this.videoSource }, isPlaying: false } }, computed: { player () { return this.$refs.videoPlayer.player } }, methods: { onPlayerPlay (player) { console.log('player play!', player) this.isPlaying = true; }, onPlayerReady (player) { console.log('player ready!', player) this.player.play() }, onPlayerPause (player) { this.player.pause(); this.isPlaying = false; }, modalClosed(player){ if(this.isPlaying == true){ this.player.pause(); } } }, watch: { videoSource: function(){ console.log(this.videoSource, "INSIDE WATCHER") this.playerOptions.sources = this.videoSource; this.playerOptions.sources[0].type = 'video/mp4'; this.isPlaying = false; } } } </script> props videoSource 数组是 videoSource = { src: '', type: '' } 如您所见，如果 videoSource 属性以 mp4 / mov 格式传递 src 值，这些代码可以正常工作，但如果 videoSource 的 src 和类型是 mpeg，则这些代码将不起作用。 我也尝试过这个方法但是没用。 任何人请帮我提供有关在 HTML5 中播放 mpeg 格式视频的库或插件的参考信息。提前谢谢大家，爱你们。 您可以尝试的一件事是将 mpeg 视频转换为 HTML5 更广泛支持的其他格式，例如 mp4、webm 或 ogg。您可以使用商业或开源工具来执行此操作，然后将转换后的视频上传到您的网络服务器。然后，您可以在标签内使用多个标签来提供同一视频的不同格式供浏览器选择。例如，你可以这样做： <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video-player> 这样，您可以确保您的视频播放器可以在任何支持 HTML5 的浏览器中播放视频。您可以通过以下链接了解有关 HTML5 视频格式以及如何将它们嵌入到 HTML 中的更多信息：HTML 视频 - W3Schools 和 HTML 视频 - 如何使用 HTML 5 视频标签嵌入视频播放器。 您可以尝试的另一件事是使用可以在 HTML5 中播放 mpeg 视频的 JavaScript 库或插件。有一些库可以执行此操作，例如 MediaElement.js、Video.js 或 Plyr。这些库可以提供自定义视频播放器，可以处理不同的视频格式和编解码器，并添加字幕、字幕、播放列表等功能。您可以使用 npm 或 CDN 安装这些库，然后在 Vue 组件中使用它们。例如，你可以这样做： <template> <div class="layout-video"> <video id="video" class="video-js vjs-default-skin vjs-layout-small" controls preload="auto" width="640" height="360"> <source src="video.mpeg" type="video/mpeg"> </video> </div> </template> <script> import videojs from 'video.js'; export default { mounted() { // initialize the video player this.player = videojs(this.$refs.video, this.options, function onPlayerReady() { console.log('onPlayerReady', this); }); }, beforeDestroy() { // destroy the video player if (this.player) { this.player.dispose(); } }, data() { return { player: null, options: { // video player options } }; } }; </script> 这样，您就可以使用库或插件来播放 HTML5 中的 mpeg 视频。您可以通过以下链接了解有关这些库以及如何在 Vue 组件中使用它们的更多信息：[MediaElement.js]、[Video.js] 和 [Plyr]。 我希望这可以帮助您了解如何使用 vue-video-player 在 HTML5 中播放 mpeg 视频。

Vuejs：如何向作为 props 传递的数组添加其他项目？

我有一个要传递到表单中的对象位置，以便正确重新填充表单字段。 我的父模板如下所示： 我的...

如何在Vue.js模板中定义临时变量

这是我当前的模板： 这是我当前的模板： <a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}"> <some-inner-element>{{rowLenMap[orderList[n - 1]]}}</some-inner-element> </a-draggable> </a-droppable> 问题是我要多次写rowLenMap[orderList[n - 1]]，而且恐怕vue.js引擎也会计算多次。 我想要的是这样的： <a-droppable v-for="n in curSize" :key="n - 1" v-define="rowLenMap[orderList[n - 1]] as rowLen" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLen > 10}"> <some-inner-element>{{rowLen}}</some-inner-element> </a-draggable> </a-droppable> 我觉得技术上实现起来并不困难，因为用v-for="rowLen in [rowLenMap[orderList[n - 1]]]"之类的东西就可以笨拙地解决。那么有没有简洁且官方的解决方案呢？ 我找到了一种非常简单（几乎神奇）的方法来实现这一目标， 它所做的只是定义一个内联（局部）变量，其中包含您要多次使用的值： <li v-for="id in users" :key="id" :set="user = getUser(id)"> <img :src="user.avatar" /> {{ user.name }} {{ user.homepage }} </li> 注意：set并不是Vuejs中的特殊道具，它只是用作变量定义的占位符。 Source：https://dev.to/pbastowski/comment/7fc9 CodePen：https://codepen.io/mmghv/pen/dBqGjM 更新：基于@vir us的评论 这不适用于事件，例如 @click="showUser(user)" 不会传递正确的用户，而是始终是最后评估的用户，这是因为 user 临时变量将在每个循环中重新使用和替换循环。 所以这个解决方案仅适用于模板渲染，因为如果组件需要重新渲染，它将再次重新评估变量。 但是如果你真的需要将它与事件一起使用（尽管不建议），你需要定义一个外部数组来同时保存多个变量： <ul :set="tmpUsers = []"> <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])"> <img :src="tmpUsers[i].avatar" /> {{ tmpUsers[i].name }} {{ tmpUsers[i].homepage }} </li> </ul> https://codepen.io/mmghv/pen/zYvbPKv 学分：@vir us 虽然在这里基本上复制 users 数组没有意义，但这在其他需要调用昂贵的函数来获取数据的情况下可能很方便，但我认为你最好使用 computed然后构建数组的属性。 今天我需要这个并使用了 <template> 标签和 v-for 像这样 我拿了这个代码并且 <ul> <li v-for="key in keys" v-if="complexComputation(key) && complexComputation(key).isAuthorized"> {{complexComputation(key).name}} </li> </ul> 改成这样了 <ul> <template v-for="key in keys"> <li v-for="complexObject in [complexComputation(key)]" v-if="complexObject && complexObject.isAuthorized"> {{complexObject.name}} </li> </template> </ul> 它成功了，我很惊喜，因为我不知道这是可能的 根据您的模板判断，您可能最好使用计算属性，如已接受的答案中所建议的那样。 但是，由于问题标题有点宽泛（并且在 Google 上“Vue 模板中的变量”的排名相当高），我将尝试提供更通用的答案。 特别是如果您不需要转换数组中的每个项目，则计算属性可能有点浪费。子组件也可能有些过大，特别是如果它真的很小的话（这将使其成为 20% 的模板、20% 的逻辑和 60% 的 props 定义样板）。 我喜欢使用的一个非常简单的方法是一个小的辅助组件（我们称之为<Pass>）： const Pass = { render() { return this.$scopedSlots.default(this.$attrs) } } 现在我们可以像这样编写你的组件： <Pass v-for="n in curSize" :key="n - 1" :rowLen="rowLenMap[orderList[n - 1]]" v-slot="{ rowLen }"> <a-droppable :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLen > 10}"> <some-inner-element>{{rowLen}}</some-inner-element> </a-draggable> </a-droppable> </Pass> <Pass> 通过创建作用域插槽来工作。在 Vue.js 文档 上阅读有关作用域插槽的更多信息，或者在我就该主题撰写的 dev.to 文章 中了解有关上述方法的更多信息。 附录：Vue 3 Vue 3 对插槽的处理方法略有不同。首先，<Pass>组件源码需要这样调整： const Pass = { render() { return this.$slots.default(this.$attrs) } } 刚刚使用 vue3 进行了测试并且可以工作，我认为它可以普遍使用 {{ (somevariable = 'asdf', null) }} <span v-if="somevariable=='asdf'">Yey</span> <span v-else>Ney</span> 设置变量时它不输出任何内容。 强制： 打开“(” 设置变量 关闭“, null)” 这似乎是子组件的完美用例。您可以简单地将复杂的计算值作为属性传递给组件。 https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props 这个怎么样： <div id="app"> <div v-for="( id, index, user=getUser(id) ) in users" :key="id" > {{ user.name }}, {{ user.age }} years old <span @click="show(user)">| Click to Show {{user.name}} |</span> </div> </div> CodePen：https://codepen.io/Vladimir-Miloevi/pen/xxJZKKx 在某些情况下，v-define或v-set确实有助于防止重复执行某些操作（尽管计算属性有时更好）。您可以将 v-for 与仅具有该值的数组一起使用。 <template v-for="user in [getUser(id)]"> Hello {{ user.name }}! </template> 与假设的v-set具有相同的效果： <template v-set="user=getUser(id)"> Hello {{ user.name }}! </template> <template> <div> <div v-for="item in itemsList" :key="item.id"> {{ item.name }} <input v-model="item.description" type="text" /> <button type="button" @click="exampleClick(item.id, item.description)"> Click </button> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Name1', }, { id: 2, name: 'Name2', }, ], } }, computed: { itemsList() { return this.items.map((item) => { return Object.assign(item, { description: '' }) }) }, }, methods: { exampleClick(id, description) { alert(JSON.stringify({ id, description })) }, }, } </script> 借用Mohamed的回答中的一个例子。 为了让它在 Vue3 中与 TypeScript 一起工作，我使用 Array.prototype.map() 在调用该函数的地方创建新对象。 const app = new Vue({ el: '#app', data: { users: [1, 2, 3, 4], usersData: { 1: {name: 'Mohamed', age: 29}, 2: {name: 'Ahmed', age: 27}, 3: {name: 'Zizo', age: 32}, 4: {name: 'John', age: 13}, } }, methods: { getUser(id) { return this.usersData[id]; }, }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="{ id, user } in users.map((id) => ({ id: id, user: getUser(id) }))" :key="id">{{ user.name }}, {{ user.age }} years old</div> </div> curSize 是一个数组。您的临时值包含相应的隐含数组sizedOrderList = curSize.map(n => orderList[n-1])。如果你将其定义为计算的，你的 HTML 就会变成 <a-droppable v-for="n, index in sizedOrderList" :key="curSize[index]" :style="{width: `${99.99 / rowLenMap[n]}%`, order: n}"> <a-draggable :class="{thin: rowLenMap[n] > 10}"> <some-inner-element>{{rowLenMap[n]}}</some-inner-element> </a-draggable> </a-droppable>

vue路由器无法删除查询

我尝试通过单击按钮删除查询参数。 例如我的路线是http://localhost:8080/#/myroute?dialog=1。 现在我单击一个按钮，该按钮应删除查询部分？dialog=1。 我的点击