vuejs2 相关问题

Javascript + Vue 错误：无法更新滑块的值

我有两个整数变量： $globalData.y 定义为 main.js 中的 vue observable，以及 x 在 App.vue 中定义。 我在 App.vue 中有一个滑块绑定到 x （即 v-model="x"），我希望......

如何在 vue.js 中转义大括号

我的数据库中的数据可能包含大括号{{ }}。 {{-- app.blade.php 内 --}} ...代码 {{ $数据}} 我的数据库中有数据，其中可能包含大括号{{ }}。 {{-- inside app.blade.php --}} <!-- vue app --> <div id="app"> ...code <div> {{ $data }} </div> ...code </div> 因此，如果我想向用户显示它，则该数据在 Vue 应用程序内部会导致问题。并且 vue 认为它是要执行的 javascript 代码。 例如，如果 $data 等于 {{ title->links() }} 那么我会收到错误，整个应用程序根本无法编译。 （它通过刀片模板）。 [Vue warn]: Error compiling template: invalid expression: expected expression, got '>' in _s(title->links()) Raw expression: {{ title->links() }} 305| <div>{{ title-&gt;links() }}</div> | ^^^^^^^^^^^^^^^^^^^^^^^ 逃避用户数据的大括号（在 Vue.js 中）的最佳方法是什么？？ 您需要使用 {{ }} 或 v-pre 指令：v-html 或 <div v-pre>{{ data }}</div>

Vue、Leaflet、Mapbox - 错误找不到地图容器

我的理解是，该错误是由于我的代码尝试在渲染 HTML 元素之前初始化地图造成的。据说，在 Mounted() 中将地图初始化为 var 应该可以修复它。我

@手表装饰器未激活

我有一个简单的测试组件，模板如下所示： {{消息}} 我有一个简单的测试组件，模板如下所示： <template> <div> <input type="text" v-model="name" class="form-control"> <h5>{{ message }}</h5> </div> </template> <script src="./test.ts" lang="ts"></script> TypeScript 组件如下所示： declare var Vue: typeof Function; declare var VueClassComponent: any; import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; @VueClassComponent.default({ template: require("./test.vue"), style: require("./test.sass"), props: { name: String, num: Number } }) export default class TestComponent extends Vue { name: string; num: number; message: string = ""; @Watch("name") protected onNameChanged(newName: string, oldName: string): any { console.log("setting " + oldName + " to " + newName); } mounted(this: any): void { console.log("mounted called"); this.message = "Hello " + this.name + " " + this.num; } } 当我在 input 框中输入内容时，@Watch("name") 处理程序永远不会触发，但是我确实在 console: 中收到这些错误 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name" 对于在 input 框中输入的每个字符一次。我不知道该名称在哪里设置，因为我没有在任何地方设置它。虽然这是我的目标（更新名称），但我一直在读你不能直接更改值，你需要设置 @Watch 处理程序，然后在其他地方设置它们（我仍然不明白如何但现在还无法获得。 根据我们的讨论，这里问题的根源在于将 name 声明为属性。目的是 name 是一个内部值，仅用于导出 message。既然如此，手表就没有必要了，电脑就可以了。 declare var Vue: typeof Function; declare var VueClassComponent: any; import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; @VueClassComponent.default({ template: require("./test.vue"), style: require("./test.sass"), props: { num: Number } }) export default class TestComponent extends Vue { name: string; num: number; get message(){ return "Hello " + this.name + " " + this.num; } } 这是因为 name 变量尚未初始化，因此在“this”上尚不存在。如果它被初始化为任何值，那么就会为其创建一个 proxyGetter 并且手表将会工作。

我有 laravel 8 创建的项目，我使用 JWT 作为我的 API，现在我无法安装 Pusher，因为 JWT 版本

有人可以帮我解决这个冲突 您的要求无法解析为一组可安装的软件包。 问题1 - tymon/jwt-auth 已锁定到版本 1.0.2 以及此包的更新...

如何在 Vue 2 上从第 3 方包延迟加载 css 样式表？

当必须导入第 3 方包及其 .css 样式表时，如何在自定义组件中延迟加载样式表？我正在使用 Vue CLI 5 和 Webpack 5 例如，我有一些cu...

仅当 Vue Router 子路由被命中时才触发 API 调用

我正在使用Vue2和vue router 3x。每当点击特定的子路由时，无论是通过按钮按下还是浏览器后退/前进按钮点击，如何执行存储操作？ 我需要...

如何将 v 菜单置于所选项目的中心？ （Vuetify、Vue2）

我使用 v 菜单有一长串可选项目。我想使用 v-list-item-group 将列表置于所选项目的中心。然而，当使用 v 菜单上的“auto”属性时，调整

调整中心不在中心位置

我正在 vue 中创建一个简单的步进器组件。我已经能够实现所需的功能，但即使在应用 justify-content: center 之后，对齐也会向左移动 下面是我的代码 https://

vuejs2 el-table-column 带有计算值的列属性

我是 VueJS 新手。我不知道如何在 ui-element 库的表中使用“计算”值。这是我尝试的方法： 我是 VueJS 新手。我不知道如何在 ui-element 库的表中使用“计算”值。这是我的尝试： <template> <div class="row"> <div class="col-md-12"> <h4 class="title">Commandes en cours</h4> </div> <!--<div v-if="$can('manage-order')">You can manage order.</div>--> <div class="col-12"> <card title=""> <div> <div class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap"> <el-select class="select-default mb-3" style="width: 200px" v-model="pagination.perPage" placeholder="Per page"> <el-option class="select-default" v-for="item in pagination.perPageOptions" :key="item" :label="item" :value="item"> </el-option> </el-select> <el-input type="search" class="mb-3" style="width: 200px" placeholder="Search records" v-model="searchQuery" aria-controls="datatables"/> </div> <div class="col-sm-12"> <el-table stripe style="width: 100%;" :data="queriedData" border> <el-table-column v-for="column in tableColumns" :key="column.label" :min-width="column.minWidth" :prop="column.prop" :label="column.label"> </el-table-column> <el-table-column :min-width="120" fixed="right" label="Actions"> <template slot-scope="props"> <a v-tooltip.top-center="'Like'" class="btn-info btn-simple btn-link" @click="handleLike(props.$index, props.row)"> <i class="fa fa-heart"></i></a> <a v-tooltip.top-center="'Edit'" class="btn-warning btn-simple btn-link" @click="handleEdit(props.$index, props.row)"><i class="fa fa-edit"></i></a> <a v-tooltip.top-center="'Delete'" class="btn-danger btn-simple btn-link" @click="handleDelete(props.$index, props.row)"><i class="fa fa-times"></i></a> </template> </el-table-column> </el-table> </div> </div> <div slot="footer" class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap"> <div class=""> <p class="card-category">Showing {{from + 1}} to {{to}} of {{total}} entries</p> </div> <l-pagination class="pagination-no-border" v-model="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"> </l-pagination> </div> </card> </div> </div> </template> <script> import {Table, TableColumn, Select, Option} from 'element-ui' import LPagination from 'src/components/Pagination.vue' import Fuse from 'fuse.js' export default { components: { LPagination, [Table.name]: Table, [Select.name]: Select, [Option.name]: Option, [TableColumn.name]: TableColumn }, computed: { clientName(customer){ return customer.firstname + ' '+ customer.lastname }, pagedData () { return this.tableData.slice(this.from, this.to) }, /*** * Searches through table data and returns a paginated array. * Note that this should not be used for table with a lot of data as it might be slow! * Do the search and the pagination on the server and display the data retrieved from server instead. * @returns {computed.pagedData} */ queriedData () { let result = this.tableData if (this.searchQuery !== '') { result = this.fuseSearch.search(this.searchQuery) this.pagination.total = result.length } return result.slice(this.from, this.to) }, to () { let highBound = this.from + this.pagination.perPage if (this.total < highBound) { highBound = this.total } return highBound }, from () { return this.pagination.perPage * (this.pagination.currentPage - 1) }, total () { this.pagination.total = this.tableData.length return this.tableData.length } }, data () { return { pagination: { perPage: 5, currentPage: 1, perPageOptions: [5, 10, 25, 50], total: 0 }, searchQuery: '', propsToSearch: ['id_order'], tableColumns: [ { prop: 'id_order', label: 'ID', minWidth: 200 }, { prop: "clientName(customer)", label: 'Client', minWidth: 200, } ], fuseSearch: null, tableData:[] } }, methods: { handleLike (index, row) { alert(`Your want to like ${row.name}`) }, handleEdit (index, row) { alert(`Your want to edit ${row.name}`) }, handleDelete (index, row) { let indexToDelete = this.tableData.findIndex((tableRow) => tableRow.id === row.id) if (indexToDelete >= 0) { this.tableData.splice(indexToDelete, 1) } } }, mounted () { this.fuseSearch = new Fuse(this.tableData, {keys: ['id_order']}) }, created (){ this.$store.dispatch('ps_orders/get_ps_orders').then( this.tableData = this.$store.getters["ps_orders/orders"]) } } </script> <style> </style> 我的对象就像（一行） { "id_order": 4641, "customer": { "id_customer": 9008, "firstname": "Pierre", "lastname": "dupont" } } 在“客户”栏中我想要customer.firstname + " " + customer.lastname...但是我计算的“方法”不起作用（我猜这是完全错误的）。 答案是：你不能声明一个带有参数的计算，这里是解决方法 <el-table-column label="Client" > <template slot-scope="scope"> {{ clientName(scope.row.customer) }} </template> </el-table-column> 并且 computed: { clientName(){ return (customer) => customer.firstname + ' '+ customer.lastname }, 抱歉，但这是简单的方法 - 计算 clientName 返回函数，它没有意义。正确的方法是将 clientName 按原样放入方法中，这只是给初学者洗脑:) methods: { clientName(customer){ return customer.firstname + ' '+ customer.lastname }, }

Vue JS 中父组件按下按钮时如何刷新子组件的方法？

我在父组件的表单字段中有一个带有选择选项的提交按钮现在，当用户更改选择选项时，它将采用该值并在子组件中执行方法/函数。

如何使用对象来使用 Vue 2.0 反应性？

我有一个包含某些数据的父组件： 数据：函数（）{ 返回 { 初始项目：{名称：“项目”，大小：10，描述：“一些文字”} 当前我...

如何在Vuex状态创建中使用函数

我正在尝试使用稍后定义的吸气剂来设置我的状态的一部分 导出 const store = new Vuex.Store({ 状态 ： { 一：1， b : getters.multiply(a) }, 吸气剂：{ 乘以：(...

vuejs for 循环总是返回最后一个值

在vuecli中我有这样的数据 数据（） { 返回 { 选项： [{ 值：['a'、'b'、'c'] }], 变体：[]， p：{ ...

无法读取未定义的属性“getters” - 使用 jest 进行 VueJS 单元测试

我正在为 VueJS 组件编写单元测试，并参考了 Vue Test Utils Common Tips 的“应用全局插件和 Mixins”部分。我有一个依赖于 Vuex 商店的组件，所以它

Vue2 在 vue3 中扩展替代方案

从“vue”导入Vue； const rootVeComp = Vue.extend(VueGlobalCart); this.vueMiniCart = 新 rootVueComp({ el: this.selector, 数据： { ...

与 Vue 2 兼容吗？

有没有办法使用 Bit 来生成 Vue 2 组件？现在，似乎创建一个 Vue 3 附带的组件作为对等依赖（这很好，因为 Vue 2 将不再支持......

如何用nuxt加载本地JS文件

我的文件夹 /assets/js 中有多个脚本。 我将它们添加到 nuxt.config.js 中，如下所示： 脚本： [ { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' }, { src: '~asse...

VS 代码显示 eslint 错误，但 vitest 正在工作。 'vi' 未定义

我有一个这样的 tsconfig 文件 { “包括”：[“测试/**/*.ts”]， “排除”： []， “编译器选项”：{ “复合”：真实， “lib”...

检查组件是否附加了事件监听器

假设有一些组件。可以使用附加的 @cancel 事件侦听器来调用它，如果是这种情况，我想显示触发此事件的取消按钮。如果有的话... 假设有一些 <Form> 组件。可以使用附加的 @cancel 事件侦听器来调用它，如果是这种情况，我想显示触发此事件的取消按钮。如果没有 @cancel 事件，取消按钮应该不可见。 有没有办法检查组件是否附加了事件侦听器？ 目前我做的是： <template> <form> <button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button> </form> </template> 并这样称呼它： <Form :cancelEventPassed="true" @cancel="handle_cancel" /> 都可以 <Form/> 是否可以在不使用任何其他属性（如cancelEventPassed）的情况下实现这一目标？ 当组件附加了侦听器时，它们可以在组件的 $listeners 属性中使用。 您可以使用该属性来确定特定侦听器是否可用。例如，这是一个计算属性，用于检查 cancel 侦听器是否存在。 computed:{ hasCancelListener(){ return this.$listeners && this.$listeners.cancel } } 这是在组件中使用的示例。 console.clear() Vue.component("CustomForm", { template:` <div> <h1>Custom Form</h1> <button v-if="hasCancelListener" @click="$emit('cancel')">I have a listener!</button> </div> `, computed:{ hasCancelListener(){ return this.$listeners && this.$listeners.cancel } }, }) new Vue({ el: "#app", methods:{ onCancel(){ alert('canceled') } } }) <script src="https://unpkg.com/[email protected]"></script> <div id="app"> <custom-form @cancel="onCancel"></custom-form> <hr> <custom-form></custom-form> </div> 在 Vue 3 中，$listeners 对象已被删除。侦听器现在是 $attrs 对象的一部分，并且 带有 on 前缀。 为了检查子组件中是否存在特定侦听器，您可以执行以下操作： computed: { hasCancelListener() : boolean { return (this.$attrs && this.$attrs.onCancel) as boolean } } 子组件称为： <custom-form @cancel="onCancel"></custom-form> 因为 @prerak-sola 的解决方案不起作用，如果您像这样定义发射（如 所示） 亚当·里斯）： const emit = defineEmits<{ (e: 'click', v: MouseEvent): void; (e: 'update:modelValue', v: MouseEvent): void; }>(); 我发现，由于 vue 将所有 props 转换为对象，并且只是在每个事件名称之前添加前缀 on，因此您只需检查该属性（事件侦听器）是否在 vnode 中定义： const hasClickEventListener = computed(() => !!getCurrentInstance()?.vnode.props?.onClick); const hasModelValueUpdateListener = computed(() => !!getCurrentInstance()?.vnode.props?.['onUpdate:modelValue']); 但是，我在官方文档中找不到任何有关此内容的信息（并且它比使用useAttrs困难得多）。所以请谨慎使用。 此示例适用于 Vue 3 this.$attrs.onCancel 说明 Vue 3 删除了 $listeners 对象，而是侦听器将与带有 $attrs 前缀的 on.. 对象分开。 参考 https://v3-migration.vuejs.org/writing-changes/listeners-removed.html#overview 您可以这样检查监听器是否存在： this._events['listener-name'] 如果您在这里寻找 Vue 3 script setup 或 setup function 解决方案，您可以检查 attrs 函数中的 getCurrentInstance 键 <template> <form> <button @click="$emit('cancel')">Cancel</button> </form> </template> <custom-form @cancel="onCancel"></custom-form> onMounted(() => { const instance = getCurrentInstance() // only available inside lifecycle hooks console.log(instance?.attrs?.onCancel) }) Vue 2.7 脚本设置示例 import {useListeners, computed} from 'vue'; const listeners = useListeners(); const hasCancelListener= computed(() => { return typeof listeners['cancel'] !== 'undefined'; }); 在 Vue 3 中 const thisInstance = getCurrentInstance(); const hasTaskClickedListener = computed(() => { if (!thisInstance) return null; return thisInstance.attrs?.onClicked; }); 说明： this 与 vue 3 中的 getCurrentInstance() 相同 listeners 对象通过前缀为“on”的属性进行更改，如 onClick、onDelete 等 将 getCurrentInstance() 始终放在设置脚本上，除非你总是为 null（vue 无法看到其实例时的值）