vuejs2 相关问题

disable-devtool 包在路线导航后不更新参考值

我在我的应用程序中使用Vue 3，并实现了disable-devtool包来检测浏览器的开发人员工具何时打开或关闭。当我第一次加载时一切正常

设置选项选择菜单的默认值

我想将自定义属性绑定到选项选择菜单。 标签仅具有 selected="selected" 属性 < 我想将自定义属性绑定到选项选择菜单。 <option> 标签仅具有 selected="selected" 属性 <template> <div> <select> <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> </select> </div> </template> data: { selected: "selected", notSelected: "" } 这不起作用，但如果我将 v-bind:selected 更改为 v-bind:class 那么它会收到适当的类，因此逻辑正在工作，但不适用于 selected 属性。 有什么方法可以使其与此类自定义属性一起使用吗？ 您可以使用 v-model 在选择框中选择默认值： 标记： <div id="app"> <select v-model="selected"> <option value="foo">foo</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select> </div> 查看型号： new Vue({ el: "#app", data: { selected: 'bar' } }); 这是 JSFiddle：https://jsfiddle.net/Lxfxyqmf/ html: <div id="myComponent"> <select v-model="selectedValue"> <option v-for="listValue in valuesList" :value="listValue"> {{listValue}} </option> </select> <span>Chosen item: {{ selectedValue }}</span> </div> js: var app = new Vue({ el: '#myComponent', data: { selectedValue: 'Two', valuesList: ['One', 'Two', 'Three'] }, 我创建了一个可重用的 select 组件，它也将 modelValue 发送到父组件。 如果您查看第一个选项标签，您可以看到我如何使用 props 创建默认值。 BaseSelect.vue（子组件） <template> <label v-if="label">{{ label }}</label> <select class="field" :value="modelValue" v-bind="{ ...$attrs, onChange: ($event) => { $emit('update:modelValue', $event.target.value); }, }" > <option value="" disabled>{{ defaultValue }}</option> <option v-for="option in options" :key="option" :value="option" :selected="option === modelValue" > {{ option }} </option> </select> </template> <script> export default { props: { label: { type: String, default: "" }, defaultValue: { type: String, default: "Select an item of the list", required: false }, modelValue: { type: [String, Number], default: "Otros" }, options: { type: Array, required: true }, }, }; </script> 父组件 <BaseSelect label="Asunto" defaultValue = "Selecciona un asunto" v-model="contactValues.asunto" :options="asuntos" /> 请注意，您必须在 data() (v-model) 中正确接收此值 使用新的组合 API： <template> <select v-model="selectValue"> <option value="a"> Option a </option> <option value="b"> Option b </option> </select> </template> <script> import { ref } from 'vue'; export default { setup() { // Create a reactive value for our select const selectValue = ref('a'); // Return to the template return { selectValue }; }, }; </script> 所以我不确定这个问题是否已经解决，但我只是想在这里添加另一个选项。 <select v-model="selectedOffice" class="select-style"> <option v-for="(office_id) in OID" :key="office_id"> {{ office_id.office_name }} </option> </select> JS： if (this.OID.length < 2) { this.selectedOffice = this.OID[0].office_name; this.officeID = this.OID[0].office_id; } 因此在这种情况下，如果数组中只有一个选项，我将 v-model 变量设置为数组中的第一个选项。如果有更多选择，概念是相同的。

[Vue warn]：属性或方法“search”未在实例上定义，但在渲染期间引用

我在控制台中收到此错误，我只是无法理解出了什么问题： 我收到这条消息： Vue warn]：属性或方法“search”未在实例上定义，但在

有什么方法可以“监视”Vuejs 中的本地存储吗？

我正在尝试监视本地存储： 模板： 令牌 - {{令牌}} 脚本： 计算：{ 令牌（）{ return localStorage.getItem('token'); } } 但它并没有改变...

如何在 Nuxt 2 中将 static error.html 替换为 custom-error.html

我尝试替换 .nuxt/views/ 目录中的 error.html，但我不知道该怎么做。 我使用 Nuxt 2.15.8。 我尝试按照本文中的步骤进行操作 https://blog.lichter.io/posts/nuxtjs-change-...

如何将VueJS模板的内容拆分为多个文件

在下面的示例中，我希望将应用程序的显示保留在主文件中，并将设置版本保留在单独的文件中（每个设置一个文件），以获得更清晰的代码和更好的可读性。 <

如何在vue js html中根据时间显示“已关闭”或“打开”？

这是我的json数据，用于显示商店的营业时间： { “状态”：真实， “数据”： { “pid”：1， “企业名称”：“ard”...

迁移到 Vue3 时语法错误：类型错误：无法读取未定义的属性（读取“样式”）

我目前正在尝试使用迁移构建从Vue2迁移到Vue3。 当我尝试构建项目时，出现以下错误： 语法错误：类型错误：无法读取未定义的属性（

如何将按钮与v卡标题放在同一行？

我的 v 卡上有标题、子标题、图标和按钮。我的目标是将创建按钮放在右侧，但我似乎无法做到这一点。 ... 我的 v 卡上有标题、子标题、图标和按钮。我的目标是将创建按钮放在右侧，但我似乎无法做到这一点。 <template> <v-row class="pl-5"> <v-card class="pl-5" elevation="0"> <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> </v-card-title> <v-card-subtitle> Subheader </v-card-subtitle> <v-spacer></v-spacer> <router-link v-if="type == 'index'" :to="`/${name.toLowerCase().replace(' ', '-')}/create`"> <v-btn outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </router-link> </v-card> </v-row> </template> <script> export default { props: { icon: String, name: String, title: String, subtitle: String, type: String }, components: {} } </script> <style scoped></style> 如果我将 <router-link> 移至 <v-card-subtitle> 我明白了 如果我将 <router-link> 移至 <v-card-title> 我明白了 有人可以帮我推一下吗？ 小提琴 https://jsfiddle.net/bheng/h2u870dv/ 如果我这样做： <v-row class="pl-5"> <v-card-title> <span class="material-icons"> favorite_border </span> <p class="font-weight-bold">TITLE</p> <p class="caption">ST</p> </v-card-title> <v-spacer></v-spacer> <v-btn>Create</v-btn> </v-row> 我明白了 按钮似乎位于我想要的位置，但标题和副标题严重错位。我现在被困住了。 您可以在 v-row 中添加 div 或 v-col 并使用 css 按照您想要的方式对齐项目： new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { icon: 'favorite_border', name: 'link', title: 'TITLE', subtitle: 'https://fonts.google.com/icons?selected=Material+Icons', type: 'index' } } }) .myclass { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-row class="pl-5"> <div class="myclass"> <v-card class="pl-5 mycard" elevation="0"> <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> </v-card-title> <v-card-subtitle> Subheader </v-card-subtitle> <v-spacer></v-spacer> </v-card> <a v-if="type == 'index'" :href="`/${name.toLowerCase().replace(' ', '-')}/create`"> <v-btn outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </a> </div> </v-row> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> 您的问题是您将按钮放置在您声明设置标题样式的v-card内。由于您没有指定任何宽度，因此这张卡只是一个方形盒子。如果你设置海拔=“1”，你可以清楚地看到这一点。 只需将按钮放在 v 卡外部，v-spacer 即可工作。或者，您也可以将 v-card 宽度设置为 100%。顺便说一句，您还可以在 to 中使用 v-btn 属性，因此不需要 v-router-link。 检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71444864-v-spacer-example-0tx24n?file=/src/components/Example.vue <v-row class="pl-5"> <v-card class="pl-5" elevation="0"> <v-card-title> <v-icon left x-large color="primary"> mdi-home </v-icon> <span class="font-weight-bold">Testing</span> </v-card-title> <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle> </v-card> <v-spacer></v-spacer> <v-btn to="/about" outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </v-row> 更新：v-cols 和带有断点条件的自定义 CSS 我看到您有兴趣学习如何使用 vuetify 的网格 进行此设计。使用 v-cols 和断点条件的优点是，您可以更好地控制不同视口的设计。就像在移动视图上一样。我就是这样做的。 我首先将网格分成两列，一列用于标题，一列用于按钮，在 cols 视图（以前称为 xs（超小））中，我将它们的大小设置为 12 列，然后在 sm（小）及以上，我将大小设置为每列 6 列。这样它们就显示为一半。 标题列没有变化，在按钮列上，我使用类 d-flex justify-end 将按钮全部移至右侧，并使用 align-center 将按钮垂直居中于 v-row 的中间。 然后，我使用断点条件来激活按钮的 block 属性，并将填充应用于整个 v 行，具体取决于当前视口。 <v-row :class="$vuetify.breakpoint.smAndUp ? 'px-4' : ''"> <v-col cols="12" sm="6"> <v-card elevation="0"> <v-card-title> <v-icon left x-large color="primary"> mdi-home </v-icon> <span class="font-weight-bold">Testing</span> </v-card-title> <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle> </v-card> </v-col> <v-col cols="12" sm="6" class="d-flex justify-end align-center"> <v-btn to="/about" :block="$vuetify.breakpoint.xsOnly ? true : false" outlined class="blue--text"> <span>Create</span> </v-btn> </v-col> </v-row> 您正在使用 Vuetify 对吗？然后更简单，只需在 v-card-title 标签中添加带有绝对右上属性的按钮即可。然后 v-btn 还允许 :to (https://v2.vuetifyjs.com/en/api/v-btn/#props) <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> <v-btn outlined absolute right top v-if="type === 'index'" class="blue--text mt-5 mr-8" :to="name.toLowerCase().replace(' ', '-') + '/create'"> </v-btn> </v-card-title> <v-card-title class="d-flex justify-space-between"> <v-icon left x-large color="primary">{{ icon }}</v-icon> {{ title }} <span><v-btn outlined class="blue--text mt-5 mr-8"> Create </v-btn></span> </v-card-title>

使用vue数据变化时d3图表自动更新

我希望每次我的模拟更改并传递到数据时，条形图都可以重新渲染或更新。我在条形图组件中查看了 dataa，但它不起作用。 “console.log('这个', this.dataa);”永远不会触发...

如何避免指令中的引用错误

有没有办法避免 v-if（和其他指令，但主要是关于 v-if）中的长时间检查，例如： ... v-if="用户 && 用户.数据 && 用户.数据.密码" ？ 我的意思是如果用户为空...

如何通过 Vue 中的绑定找到元素

在 Vue2 中，如果绑定属性已知，如何找到元素？ 有没有办法将两者关联起来？ 在这种情况下，它会...

每次查看一个翻译文件

我使用 vue.js（版本 2），每个 vue 文件中都有一个翻译块，如下所示： abc.vue { “fr”：{ “设置”：“会议” }, ...

如何在vue中动态加载组件

{{停止}} ... <template> <div> <v-container fluid id="main"> <v-card class="white lighten-4 elevation-3"> <li v-for="stop in stop_name_arr"> {{stop}} </li> <direct_bus_travel_time_in_between_stops> </direct_bus_travel_time_in_between_stops> <direct_bus_travel_distance_in_between_stops> </direct_bus_travel_distance_in_between_stops> </v-card> </v-container> </div> </template> 我有两个组件direct_bus_travel_time_in_between_stops和direct_bus_travel_distance_in_between_stops要在<li v-for="stop in stop_name_arr">{{stop}}</li>完全执行后加载。 有什么方法可以将组件动态附加到函数内，以便在我想要加载它时加载它吗？ 我非常认为您可以使用元 component 标签，该标签异步加载传递给 is 属性的给定组件。 这是代码： <component is="direct_bus_travel_time_in_between_stops" > </component> <component is="direct_bus_travel_time_in_between_stops" > </component> 您可以在此标签中添加功能/事件，它将在何种条件下加载。 我认为这个链接会有帮助 - https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components 其中描述了动态使用的绑定组件 希望我的方法对你有用！ 更新：这个答案是参考 vue 2.x 版本提供的。我不知道 vue 3.x，也没有阅读 3.x 文档。您可以随时提交 vue 3.x 兼容解决方案的编辑草稿。谢谢！ 我已经准备了类似的方法，但更加自动化，使用由 pinia 提供支持的 localStorage 和包装器组件，一次切换所有实例。 看看并随意发表评论:) https://github.com/Nagell/dynamic_loading_components

为什么Vue模型在input.val(value)时不更新？

我有可编辑的表格： ... 我有可编辑的表格： <div id="myTable"> <b-table class="overflow-auto" :items="filtered" :fields="visibleFields" :filter="filter"> <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }"> <b-input v-model="item[field.key]" placeholder="--" @@change="update" /> </template> </b-table> </div> Vue 脚本（cdn） <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: "#myTable", computed: { editableFields() { return this.fields.filter(field => field.editable); }, visibleFields() { return this.fields.filter(field => field.visible) } }, data: { filter: '', filtered: JSON.parse(`@Html.Raw(Model.SportBudgetsJson)`), fields: [ { key: 'Id', label: 'Id', visible: false }, { key: 'Field1', label: 'Field1', editable: true, visible: true, class: "percentageFormat pValue", thStyle: { width: "5%" } }, { key: 'Field2', label: 'Field2', editable: true, visible: true, class: "moneyFormat mValue", thStyle: { width: "10%" } }, ] } }); ... 以及用于格式化表中值的 js 函数： function formatValue(value, event, isPercent) { ... // returns value in ###.##% or $###,###.## format return formattedValue; } function copyValue(element, isPercent) { //update in % value if $'s value have changed and vise versa var selector = isPercent ? '.mValue' : '.pValue'; var input = $(element).parent('td').parent('tr').children(selector).first().children('input'); var value = element.value.replace(/[^\d]+/g, ''); value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent); $(input).val(formatValue(value, 'input', !isPercent)); } function converValue(value, isPercent) { value = parseFloat(value); var totalBudget = parseFloat(`@Model.TotalBudget`); if (isPercent) { return parseFloat(totalBudget * (value / 100)).toFixed(2); } else { return parseFloat(value / totalBudget * 100).toFixed(2); } } $(document).ready(function () { // apply format events $('.moneyFormat input').each(function (index, el) { $(el).val(formatValue(el, "input", false)); $(el).on("input change", function (event) { $(this).val(formatValue($(this).val(), event, false)); if ($(el).parent('td').first().hasClass('mValue')) copyValue(this, false); }); }); $('.percentageFormat input').each(function (index, el) { $(el).val(formatValue(this, "input", true)); $(el).on("input change", function (event) { $(this).val(formatValue($(this).val(), event, true)); if ($(el).parent('td').first().hasClass('pValue')) { copyValue(this, true); } }); }); }); 当我在表中使用 $(input).val(formatValue(value, 'input', !isPercent)) 值时，表中的值会更新，但 v-model 不会。 但是当我手动输入值时 - v-model 更新 我想实现实时值更新： 总金额 $100.00 Field1：从 12.00% 更改为 13.00%，因此 Field2 自动从 $12.00 更改为 $13.00 总金额 $100.00 Field2：从 $50.00 更改为 $45.00，因此 Field1 自动从 50.00% 更改为 45.00% 应计算这些值并将其粘贴到其输入中 如何将 v-model 更新为输入值？ JQuery 操作 DOM 不会自动更新 Vue 反应性数据绑定，因为 Vues 反应性系统依赖其自己的方法来检测数据更改。当您直接使用 jquery 操作 DOM 时，Vue 不会意识到这些更改。 function copyValue(element, isPercent) { var selector = isPercent ? '.mValue' : '.pValue'; var row = $(element).closest('tr'); var input = row.find(selector).first().children('input'); var value = element.value.replace(/[^\d]+/g, ''); value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent); var index = row.index(); if (isPercent) { this.filtered[index].Field1 = value; } else { this.filtered[index].Field2 = value; } input.val(formatValue(value, 'input', !isPercent)); }

VueJS 2.6 中的编程路由和“在新选项卡中打开链接”选项

我有一个按钮，如果我点击它，就会将我带到一个新页面。它看起来像这样并且工作得很好（简化示例）： 去 我可以...

如何在 Vue.js 2.5+ 中使用 Vue-IMask 和 Vuetify

如何在 Vuetify 控件（特别是 v-text-field）上使用 Vue-IMask 指令？它适用于 HTML 输入，但我在 v-text-field 上遇到错误。

当同一页面有多个图片上传字段时，如何处理从剪贴板粘贴图片？

我正在维护一个旧的 vuejs 2 应用程序，由离开公司的其他人完成。这是我们唯一的 vuejs 应用程序，所以没有人那么了解 vue，想知道你是否可以提供帮助。我写了以下内容...

Vue JS - 从日期开始的实时运行时间

目前我的刀片文件上显示了经过的时间。但是要看到更新时间，我需要每次刷新。我想显示动态的经过时间。有办法做到吗？ 我的

splitpanes：实现同步滚动和固定/粘性标题

Sandbox.vue 沙盒.vue <template> <v-container fluid> <Splitpanes class="default-theme" style="height: 400px" > <Pane v-for="i in 2" :key="i" > <div class="pa-4"> <div>Header</div> <div> <!-- very long text... --> </div> </div> </Pane> </Splitpanes> </v-container> </template> <script> import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' export default { components: { Splitpanes, Pane } } </script> <style scoped> .splitpanes__pane { overflow-y: auto; } </style> 我想要同步滚动（左右滚动，就像比较代码时一样）和粘性/固定标题。我怎样才能达到这个结果？ 编辑#1 我通过这种方式实现了同步滚动： <template> <v-container fluid> <v-card class="overflow-y-auto" height="400" outlined flat > <Splitpanes class="default-theme" style="height: auto" > <Pane min-size="1"> <div class="sticky"> Header </div> <div class="pa-4"> <!-- Very long text... --> </div> </Pane> <Pane min-size="1"> <div class="sticky"> Header </div> <div class="pa-4"> <!-- Very long text... --> </div> </Pane> </Splitpanes> </v-card> </v-container> </template> <script> import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' export default { components: { Splitpanes, Pane } } </script> <style> .splitpanes.default-theme .splitpanes__pane { background: transparent; } .default-theme.splitpanes--vertical > .splitpanes__splitter { border-left: none; } .default-theme.splitpanes--vertical > .splitpanes__splitter::before, .default-theme.splitpanes--vertical > .splitpanes__splitter::after { height: 100%; } .sticky { position: -webkit-sticky; position: sticky; top: 0; } </style> 关于固定/粘性标题，我创建了粘性类，但它似乎不起作用。有谁知道如何达到这个结果？ 查看此处可用的项目：https://github.com/vuejs/awesome-vue#scroll 看起来 vue-scroll-sync 就是这么做的。 更新：尝试了一段时间后，我没有让它正常工作...... 这就是我走了多远但没有成功 <template> <div style="display: flex"> <scroll-sync :vertical="true"> <div style="width: 100px; height: 600px; overflow: auto; background: teal" > Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras id velit ac diam pretium cursus. Aliquam sagittis magna non ante vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet scelerisque lobortis, neque ex cursus velit, sed sodales urna nibh tempor urna. Aliquam erat volutpat. Nam sit amet arcu at mauris fringilla accumsan sit amet ac mi. Mauris consectetur est ligula, eu tristique nibh sollicitudin in. Sed malesuada neque ut ante ultrices malesuada. Curabitur imperdiet neque quis est sodales, id pellentesque nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac, finibus id risus. </div> </scroll-sync> <scroll-sync :vertical="true"> <div style="width: 100px; height: 300px; overflow: auto; background: red"> Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras id velit ac diam pretium cursus. Aliquam sagittis magna non ante vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet s nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac, finibus id risus. </div> </scroll-sync> </div> </template> <script> export default { components: { [process.client && 'ScrollSync']: () => import('vue-scroll-sync'), }, } </script> 由于维护者没有更多详细信息，我不知道如何更好地联系他。 TLDR：不幸的是，我想有人需要手动实现该功能。