vuejs2 相关问题

Vue 计算属性的“效果”是什么

如果我检查 Vue 2.7 中的计算属性，我可以看到，除了众所周知的 .value 属性之外，还有 .effect。我找不到任何有关它的信息，除了它已被弃用......

如何在 Vue3 中根据此关键字加载路由器、cookie 等插件

我想将我的整个 Vue2 应用程序迁移到 Vue3，但我在这个关键字上遇到了太多错误。 现在的问题是 this.$router.push({}); this.$route.params 手表：{ “$route.path”：函数（

从vue2迁移到vue3时如何删除this.$set

我正在从 vue2 迁移到 vue3，我需要根据需要删除 $set。 例如，在我的应用程序中，我的代码在 vue2 中是这样的： this.$set(..., ..., null); 所以要删除它我应该使用

错误：请求的模块“vue”未提供名为“default”的导出

观看价值：{{ WatchValue }} ... <template> <div id="app"> <p>Watched Value: {{ watchedValue }}</p> <input v-model="inputValue" placeholder="Enter a value" /> </div> </template> <script> import Vue from 'vue'; const app = new Vue({ el: '#app', data() { return { inputValue: '', watchedValue: '' }; }, watch: { inputValue(newValue) { this.watchedValue = `You entered: ${newValue}`; } } }); </script> 在 setup 函数中，我们创建一个具有 inputValue 和 WatchdValue 属性的响应式对象状态。 我们使用 watch 函数来监视 inputValue 的变化。每当 inputValue 发生变化时，就会触发回调函数。在本例中，我们通过将您输入的字符串指定为 ${newValue} 来更新 WatchedValue 以包含输入的值。 在模板中，我们使用Vue的数据绑定语法（{{variable}}）显示watchedValue，并使用v-model将输入字段绑定到inputValue。 当用户在输入字段中键入内容时，inputValue 会进行反应式更新，从而触发手表效果。然后，watchedValue 会更新以显示输入的值，前缀为“您输入：”。 先看一下这个问题： Vue“导出默认值”与“新 Vue” 我认为你尝试导入你的“组件”，所以你需要提供： export default { components: { myComponent } data () { return {} } ... } 您的语法适用于根组件，不能像那样使用 <my-component></my-component> 在父组件中 要解决此问题，请确保导出您的操作，如下所示 // Import Axios instance with base configuration // Vuex module for authentication and permissions const state = { // }; const mutations = { // }; // Individual actions exported as named exports export async function registerUser(_, { name, email, password, password_confirmation }) { // } // Export the module as a default export export default { namespaced: true, state, mutations, getters, };

在Vuejs模板中使用时前端不会出现Bootstrap图标

我正在尝试使用 Vue.JS 构建 Web 应用程序，并且在我的应用程序中，我正在尝试使用 [Bootstrap Icons][1]。但由于某种原因，即使添加了图标后，它们也没有出现......

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)); }