无法更改Vue组件的对象属性(真正的异常)
在Vue中，如果你想要更改一个组件的对象属性，但是发现无法实现，这可能是由于以下几个原因导致的真正异常：
- 数据响应性问题：Vue使用了响应式系统来追踪数据的变化，以便在数据发生变化时更新相关的视图。如果你想要更改一个对象属性，但是该属性没有被Vue追踪，那么视图就不会更新。为了解决这个问题，你可以使用Vue.set方法或者直接给对象属性赋新值来触发响应式更新。
- 对象属性不存在：如果你想要更改一个对象的属性，但是该属性在对象中不存在，那么无法进行更改。你可以先检查一下对象是否正确初始化，并且确保属性名拼写正确。
- 对象是只读的：有些情况下，你可能会遇到只读对象，这意味着你无法更改对象的属性。这通常是由于对象被冻结或者使用了Object.freeze方法导致的。如果你需要更改这样的对象属性，你可以先创建一个新的对象，并将旧对象的属性复制到新对象中进行更改。
总结起来，如果你无法更改Vue组件的对象属性，你可以先检查数据响应性是否正常，然后确保对象属性存在且不是只读的。如果问题仍然存在，可能需要进一步检查代码逻辑或者提供更多的上下文信息来帮助解决问题。
关于Vue组件和数据响应性的更多信息，你可以参考腾讯云的Vue.js文档：Vue.js文档
相关·内容
1回答
我是，Vue，和VueD3tree的新手。我试图使用vued3tree库显示一棵树，其中包含从API获取的数据。当我尝试使用与静态数据相同的数据时，树将被完美地显示出来。但是，在获取数据的情况下，created()函数中的“”将数据打印为JSON字符串，这意味着数据已成功获取。但是没有在树中显示它，只显示了一个代表树根的小圆圈，只有那个圆圈，没有其他的。我还得到了以下错误：
TypeError:无法读取SVGGElement处u (index.js:1)处未定义的属性“x”。(index.js:2)在SVGGElement。(attr.js:29) sn.Ue at sn.tt at o
浏览 3提问于2020-12-04得票数 0
我遇到了一个问题，我通过cookies解决了它，但我想在没有cookies的情况下解决这个问题。我有一个叫做app-header的组件，还有一个叫做outmodal的组件。现在，我的第一个Vue实例需要组件app-header。
var vue = new Vue({
el : "html",
data : {
title : "Site Title",
description : "description of page",
keywords : "my
浏览 0提问于2015-08-03得票数 32
回答已采纳
1回答
过去，我们的小团队一直使用Adobe的Target来执行A/B测试。在Vue.js之前，我们的应用程序相对简单--只有普通的JS。执行任何DOM操作(或任何数据操作)都相当简单，因为我们应用程序的数据上没有多少东西与任何东西解耦。
由于我们正在过渡到Vue.js，模块化为组件并通过props传递信息的概念将意味着我们可能无法直接从Target的角度更改props。
然而，我注意到Vue Devtools扩展允许您直接更改道具。
用vanilla JS能做同样的事情吗？
浏览 1提问于2020-11-17得票数 0
1回答
我已经使用动态加载的组件在Vuejs中创建了向导类型的流，其中Save按钮在父组件中，所有文本字段都在加载的组件中。当单击Save按钮时，我需要做两件事： 1)加载下一个组件(当前正在工作) 2)从子组件中的文本字段中获取数据，并将其写入我的Vuex存储。 以下是父组件的代码： <template>
<div>
<component :is="selectedComponent"></component>
<span @click="changeComponent(selectedComponent)
浏览 25提问于2019-02-19得票数 1
这太奇怪了。当我在顶层定义布尔属性showModal时，它只是被vue.js忽略了。以下是我正在做的事情：
//Component:
export default {
props:['rating', 'showModal'],
data: function data () {
return {
rating: this.rating,
showModal: this.showModal
};
}
};
引用该视图：
const sharedRating = {
title: '',
r
浏览 6提问于2017-07-18得票数 3
回答已采纳
3回答
我有一个简单的表单组件，只有一个选择选项。每当我选择一个选项时，都会在主组件中呈现一个子组件。我的问题是我无法让Vue将父组件数据绑定到子组件数据。
form.settings是动态的，所以我不能在Form.vue之前设置属性。
此表单通过axios提交给Spring应用程序，我在提交表单时看到客户端的form.settings为null。
我是Vue的新手，以下是我的尝试：
Form.vue
<template>
<div>
<form>
<div>
<select v-model="for
浏览 7提问于2020-03-17得票数 0
回答已采纳
2回答
我使用Firebase auth进行用户身份验证，使用Firestore作为数据库，但我无法在用户和其活动之间进行同步。
campaigns: firestoreAction(({ bindFirestoreRef, getters }) => {
return bindFirestoreRef(
'campaigns',
firebase.firestore().collection(`user_profile`).doc(getters.user.data.id).collection("campaigns"))
}),
浏览 2提问于2020-01-25得票数 0
我正在将我的Vue.js组件迁移到TypeScript。在之后，我尝试使用Vue.extend()作为组件。我的组成部分是：
import Vue from 'vue';
const Component = Vue.extend({
// type inference enabled
created() {
// `y` is non-reactive property
this.y = 20; // TYPESCRIPT THROWS ERROR
}
data() {
return {
// x is r
浏览 1提问于2018-01-03得票数 12
回答已采纳
4回答
遵循，我尝试以编程方式在页面上创建组件的实例。
主要的片段如下：
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
然而，我得到了两个错误：
我试图实例化的组件包含对存储的引用，这些引用不起作用："TypeError
浏览 1提问于2018-11-09得票数 6
回答已采纳
在Vue.js中，有一些方法；Vue.set用于添加，Vue.delete用于删除，但是对于“update”，没有Vue方法，而是使用Object.assign。实际上，如果嵌套对象中没有任何更改，这是很好的。在Vue中是否有像update或refresh这样的函数，因为我在Chrome扩展选项卡中看到状态发生了变化，但是没有看到网页中的变化。
Vue视图不会为更新触发。
当我在“house”中添加一个项目时，我无法在页面上看到新的房子，甚至我可以在检查Vue，state上看到新的项目。当我重新加载页面时，我可以看到新的项目。
"clients": {
"
浏览 3提问于2020-04-01得票数 1
2回答
我有一个像这样初始化的组件
<custom :opts="{map: false}"></custom>
还有类似于以下内容的HTML
<template id="custom">
<div v-if="opts.map">
I'm awesome
</div>
<button v-on:click="show"></button>
</template>
哪里
function show(){
浏览 0提问于2018-06-26得票数 2
我试图设置一个单元测试如下：
import Vue from 'vue'
import ChangeTitleComponent from '@/components/ChangeTitleComponent'
import store from '@/vuex/store'
describe('ChangeTitleComponent.vue', () => {
describe('changeTitle', () => {
var com
浏览 2提问于2017-09-17得票数 0
回答已采纳
我开始在Vue中使用Laravel，然后继续学习教程，直到我得到这个错误。Vue似乎被困在一个递归循环中，试图加载组件(我认为)，但我无法弄清楚是什么导致了它，以及其他类似的错误消息，我在网上搜索的答案对我的情况毫无帮助。
我有两个Vue组件：
Articles.vue
<template>
<div>
<h2>Articles</h2>
</div>
</template>
Navbar.vue
<template>
<div>
<navbar cla
浏览 1提问于2019-08-15得票数 0
回答已采纳
我使用vue-table来显示一些表格数据。我试图扩展vue-table，使某些列中的单元格可编辑。因此，我创建了一个名为“可编辑单元格”的vuejs子组件，它能够编辑单元格内容。此子组件作为可编辑列的vue-table模板插入。
这些是我的vue-table选项：
headings: {
title: 'Title',
description: 'Description',
createdBy: 'Created By',
createdAt:
浏览 1提问于2016-07-15得票数 1
我有一张很好的票单(公司票)，点击的时候。它为该特定票证打开一个详细信息页(company票证)，将id传递给组件。
问题是我无法找到如何在创建的事件中访问这个支柱参数，因为它不能通过" this“访问。
companytickets.vue :
viewTicket: function(ticket){
this.$router.push('/companyticket/' + ticket.Id)
// works : this redirects to http://localhost:818
浏览 4提问于2017-02-16得票数 0
回答已采纳
基本上，我想使用我自己的商店内的vue安装和vue组件，我添加通过我的vue插件。
我发现我可以在实际安装函数中使用vuex，并完成所有vuex可以完成的操作，但我似乎无法将它传递给我的自定义组件。
在我的“证监会”中，还有其他方法可以在插件中添加全球事件吗？
import MyComponent from './MyComponent.vue'
import MySecondComponentfrom './MySecondComponent.vue'
import Vuex from 'vuex'
import store from '
浏览 7提问于2022-01-22得票数 2
回答已采纳
1回答
编辑以纠正未报告的语法错误(请参阅注释)。现在，它可以按需要工作。
让我的事件处理程序在下面的Vue代码中触发是有困难的。
如您所见，有两个组件，posts和post，以及一个根Vue实例。post模板中的按钮应该触发remove事件，该事件由posts中的v-on:remove处理程序捕获，该处理程序使用post的索引调用posts.deleteItem。有人能告诉我我做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Po
浏览 1提问于2018-09-26得票数 3
回答已采纳
name: 'app'在下面的Vue.js CLI代码中有哪些功能？
我知道export default是用来
“创建JavaScript模块，从模块导出函数、对象或原始值，以便其他程序可以使用导入语句”()
我理解模块是template元素中的内容，但我不知道它是从哪里导入的。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</
浏览 5提问于2017-09-21得票数 1
回答已采纳
使用下面的代码，如果单击“添加”，您可以在控制台中看到值更改，但视图没有更新。
new Vue({
el: '#app',
data: {
dateValue: new Date(2017,0,1),
},
methods: {
addOne: function () {
this.dateValue.setDate(this.dateValue.getDate() + 1);
console.log('new date',this.dateValue);
}
}
浏览 1提问于2018-01-25得票数 3
回答已采纳
1回答
在knockout.js中，我能够完成以下工作：
function Person() {
this.firstName = ko.observable('Foo')
this.lastName = ko.observable('Bar')
this.fullName = ko.pureComputed(() => {
return this.firstName() + this.lastName()
})
}
var p = new Person()
console.log(p.fullName()) //
浏览 1提问于2017-08-22得票数 0
回答已采纳
2回答
顺便说一句，在文档中，vue.js中的属性是单向绑定的：
请注意，JavaScript中的对象和数组是通过引用传递的，因此如果属性是数组或对象，则在子级中改变对象或数组本身将影响父状态。
所以我想知道，prop.sync是只用于"litteral“(即字符串、数字、日期)，还是必须与对象/数组一起使用？
我已经使用对象没有同步，所有的工作都很好，但我担心这不是做"vue.js“方式的好解决方案？
所以我的问题是:我可以在prop中使用对象/数组吗，没有同步，没有问题？
浏览 1提问于2018-01-28得票数 0
我尝试构建一个动态Vue组件，其中我传递一个模板字符串作为支柱，并希望组件呈现它。
this.$options.template = this.htmlString;
在我试图更改模板之前，这似乎很好。当htmlString更改时，我无法使组件重登。有办法这样做吗？
我也尝试过render函数和Vue.compile，但是我不知道如何使用它们。这会引发错误：
render(createElement) {
return Vue.compile(this.htmlString).render(createElement);
}
Vue 2.6
浏览 1提问于2021-10-13得票数 0
回答已采纳
1回答
尝试注册我的组件时组件定义无效
、、、、
我无法让我的组件在Vue CLI中工作。我的文件结构如下 ? 我在试着用GameHub和GamesAdmin像这样的组件： import { gameAdmin } from '../components/GamesAdmin';
import { gameHub } from '../components/GameHub';
export default {
data(){
return{
}
},
components: {
gameAdmin : 'gameAdmin
浏览 14提问于2021-02-24得票数 1
回答已采纳
1回答
在阅读文档中的时，我看到了两点，我不知道如何解释：
当将普通JavaScript对象作为其数据选项传递给Vue实例时，Vue将遍历其所有属性，并使用Object.defineProperty将其转换为getter/getter
(...)
由于现代JavaScript的局限性(以及对Object.observe的放弃)，Vue 无法检测属性添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此必须在数据对象中显示一个属性，以便Vue对其进行转换并使其具有反应性。
这与嵌套对象(例如
[
{
"a": 1,
"
浏览 0提问于2019-06-24得票数 0
回答已采纳
问题
事件在一个区段组件中触发，每个同级组件触发相同的事件。
换句话说，如果在customer部分中修改了call对象，那么syncCall方法会触发两次。一次是因为客户部分，一次是因为定价部分。
上下文
call组件实现每个节组件，如下所示。
Call.vue (父)
<template>
<customer-section
:callObject="call"
@change.self="syncCall">
</customer-section>
<pricing-section
浏览 0提问于2017-03-23得票数 0
回答已采纳
我拼命地尝试让vue和vue-router与typescript一起工作，但我总是遇到路由器的问题。
由于我的团队受到的限制，我们无法使用节点和包管理器，因此我们被迫使用脚本方法安装vue和vue-router：
<script src="~/scripts/libs/vue/vue.js"></script>
<script src="~/scripts/libs/vue-router/vue-router.js"></script>
除了使用上面的方法安装vue之外，我们还不能使用任何捆绑工具，因为这样的imp
浏览 1提问于2019-12-10得票数 6
我对单元测试很陌生，我正在尝试测试在组件挂载时调用的函数。下面是我正在测试的组件代码：
<template>
<div>
<div class="grid">
<Card
class="grid_layout_col"
@showItemDetail="showDetails(index)"
@openEditModal="editItem(index)"
/>
</div>
浏览 3提问于2020-02-20得票数 1
回答已采纳
由于JavaScript中的限制，Vue无法检测到数组的更改
有谁知道这些限制是什么吗？
为什么Vue可以检测到对象的更改，而不能检测数组呢？
浏览 0提问于2019-02-23得票数 0
回答已采纳
1回答
我为该网站提供了多语言支持。使用VueJS和VueI18n。有3页-家庭，登记和信息。问题在消息中，其中有一个动态呈现的表-vue-好表。当我在这个页面上(和表格一起)时，如果我点击按钮来改变语言，所有的语言都是动态变化的，而不是表的标签和占位符。如果我转到另一个页面并返回到表中，标签和占位符将被正确更新。你能帮我改变一下吗？
我想知道beforeMount()在这种情况下是否会有所帮助？
main.js
import VueI18n from 'vue-i18n'
import {messages} from './locales/bg_en_messages'
浏览 0提问于2018-06-11得票数 1
回答已采纳
3回答
我有一个和父组件一样共享v-model的组件。代码如下： Vue.component('greeting', {
template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('
浏览 7提问于2019-03-15得票数 0
回答已采纳
根据要显示的内容，我使用Vue的动态组件加载组件。由于这些组件都有不同的支持，所以我构建了一个对象并通过v绑定传递它，这取决于我需要从原始状态模型中使用什么。
然而，当我这样做时，我就失去了Vue的支持数据流的反应性。下面的代码示例展示了一个在标准组件上更改名称而不是在动态版本上更改名称的示例。
我希望这与复制到新对象中的字符串值有关，而不是对原始反应性属性的引用。有人能给我建议一下我怎样才能像预期的那样做这件事吗？
Vue.config.productionTip = false;
Vue.component("example-component", {
pro
浏览 0提问于2019-04-18得票数 5
回答已采纳
1回答
我正在尝试上传一个图像到firebase，并将结果URL存储在一个数组中，以及更新一个进度条。
该图像上传良好，并使我的基本用户界面，然而，我似乎无法让我的Vue观察者触发和存储URL到数组。
我已经将该示例放入代码沙箱中。如果有人能发现我的错误，请心存感激
"core-js": "^3.6.5",
"firebase": "^7.15.1",
"moment": "^2.26.0",
"vue": "^2.6.11",
"vue-router": &
浏览 5提问于2020-06-20得票数 1
回答已采纳
1回答
当我在路由定义中设置组件道具时，观察者无法工作，视图也从未更新过。
在本例中，更新正确工作：
const Home = { template: '<div>Home</div>' }
const Test = {
template: '<div>Test : {{ nb }}<br><button @click="addOne" type="button">+1</button></div>',
props: {nb: Number},
met
浏览 4提问于2019-11-25得票数 0
回答已采纳
在下面的片段中，我有两个Vue组件，每个组件都有一个包含两个对象的items数组。如果items数组的show属性是真实的，则设置该组件的模板以显示该对象的一个对象。数组中的第一个对象最初的show值为true。第二个对象没有show值集。
new Vue({
el: '#ex1',
data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
mounted() {
// 2nd item's show property
浏览 0提问于2018-02-15得票数 3
回答已采纳
1回答
我正在尝试编写一个带有自定义选项的vue插件。我遵循了官方的vue指南()，但找不到一种定义自定义选项的方法。这些选项应该由正常的javascript读取，然后导出一个vue组件使用的对象。
我的文件夹结构是这样的：
/src
factory.js
CustomComponent.vue
factory.js
import Vue from "vue";
import ImgixClient from "imgix-core-js";
var imgixClient = new ImgixClient({
domain: CUSTOM_O
浏览 9提问于2019-11-07得票数 0
回答已采纳
1回答
我有几个带有属性的基于类的Vue.js组件，我想要动态呈现它们。这些组件很简单，例如下面的内容。 <template>
<b-alert :show="true">
{{$t(messageId)}}
</b-alert>
</template>
<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import i18n from "../../i1
浏览 28提问于2020-08-11得票数 0
回答已采纳
我正在尝试创建npm vue component library。我一直在努力完成所有的步骤，但一直停留在npm publish。
请看下面的错误截图，我无法在谷歌上找到一个解决方案后，尝试了一个多小时(错误信息不是那么准确的IMHO，或者我可能无法抓住它)。
供参考package.json
{
"name": "@satyam/vue-components",
"version": "0.1.0",
"main": "./dist/satyam.common.js",
&
浏览 5提问于2020-05-04得票数 14
回答已采纳
我有一个非常奇怪的问题，因为当开发电子应用程序时，这个问题不会出现在类星体中。但是这个带有vue-cli的是令人沮丧的。
所以我有vuex状态，其中我有我的测试数据
export default function() {
return {
profile: {
avatar: null,
name: 'Thomas Smith',
contact: 'thomas.smith@bootiq.io',
branch: 'BIQ-PRAGUE',
position: 'S
浏览 1提问于2020-04-29得票数 0
我有一个文件组件Main.Vue。
我还有另外三个单一文件组件A.vue、B.vue和C.vue。
我希望每次都能在Main.Vue中显示不同的组件。我所做的是：
<template>
<div>
<a v-if="isAVisible" ></a>
<b v-if="isBVisible" ></a>
</div>
</template>
<script>
import A from './A.vue';
import B from &
浏览 6提问于2017-05-05得票数 9
回答已采纳
我有一个名为"List“的组件，它包含一个vue引导表：
<template>
<div>
<b-table :items="items">
<!--<template slot="createdAt" slot-scope="row"> usually vue boostrap table row templates live here-->
<!--{{row.item.createdAt|dateFormatter}}-->
浏览 0提问于2018-07-19得票数 2
回答已采纳
3回答
在div中有两个components，当两个components一起渲染时，我点击了button来正确切换，但在只渲染一个组件的情况下，切换变得异常。 这是我的代码 Base.vue <template>
<div :id="id">{{msg}}</div>
</template>
<script lang='ts'>
import { Component, Prop } from "vue-property-decorator";
import Vue from "v
浏览 15提问于2020-07-21得票数 1
1回答
未重新计算的Vue JS计算属性
、、、、
我有一个Laravel / Vue JS应用程序，它集成了谷歌地图组件以及Vuetify数据表组件。Vue实例还有一个计算属性，用于计算Google的点数，该属性基于由Vuetify数据表计算的另一个计算属性。
视图刀片中的Vue组件代码：
<v-data-table :ref="model + 'Table'" v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination"
浏览 0提问于2019-06-10得票数 1
回答已采纳
1回答
VueJS访问嵌套组件数据值
、、、、
父组件包含一个地址组件：
// ParentComponent.vue
<Address ref="childAddress"></Address>
地址组件包含许多联系人组件：
// AddressComponent.vue
<template>
<div>
<Contact ref="childContact"></Contact>
<Contact ref="childContact"></Contact>
浏览 1提问于2018-10-22得票数 2
回答已采纳
2回答
我是Vue.js的新手。问题是我无法用JSON的值填充表。控制台显示：
属性或方法“表”未定义。
当我点击按钮时，上面写着：
属性或方法"allRecords“未定义
我也不知道原因。它是index.js中的问题还是下面代码中的问题？
谢谢
<template>
<div >
<input type='button' @click='allRecords()' value='Select All users'>
<b-table stri
浏览 0提问于2018-07-13得票数 0
回答已采纳
我一直试图在我的vue3-runtime-template示例项目中使用vue3动态编译自定义vue模板。我还遵循了官方文档为这个库提供的配置指令：
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
// ...
},
},
},
};
这应该允许在运行时进行编译。当我使用Options API (使用data：() =>
浏览 3提问于2021-03-12得票数 0
在vue中使用组件标签时，如何将值传递给子组件？似乎我不能使用组件标记将值传递给子组件，除非使用v-if： <component :is="showNow"></component>
浏览 30提问于2019-10-10得票数 0
1回答
我有两个文件，一个名为clients.js with data，另一个名为clients.vue，我想导入数据并将其列在clients.vue文件中的一个表中；但导入时无法访问它。
如果我将数组移动到clients.vue-文件(所以没有导入)，它就能正常工作。
我的代码看起来(简化)如下：
Clients.vue
<template>
<div>
<table>
<tbody>
<tr v-for="client in clients">
<td>
浏览 0提问于2020-04-18得票数 0
回答已采纳
1回答
我有以下Vue.js组件，它们基本上应该有一个类似于无线电按钮的行为：
// Parent Component
<template>
<child-component
v-for="element in elements"
</child-component>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
components: {
ChildComponent
浏览 2提问于2016-03-13得票数 1
回答已采纳
我遇到的问题是，我无法访问{ .value }中的.id和selectItem}，无法将它们发送回类型记录，以便稍后发送给HTTP。虽然没有实际的错误，但我有异常，已经谷歌搜索解决，但没有任何效果。
抛出的异常:抛出的异常中的“'System.Threading.Tasks.TaskCanceledException‘”：System.Private.CoreLib.dll异常中的“System.IO.IOException”：抛出的'System.Threading.Tasks.TaskCanceledException’in System.Net.Http.dll异常:抛出
浏览 7提问于2022-01-05得票数 0
回答已采纳
我正在使用Vue.js学习Laravel，我面临着一个问题，我无法通过研究Laravel和Vue.js手册或通过互联网筛选来解决这个问题。
我有一个blde.php文件，其中我使用vue-模板。模板名为Articles.Vue，它应该出现在两个-tags之间。
渲染有一个问题。我有一个名为app.js的文件，需要Articles.vue：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles',
require('./componen
浏览 2提问于2020-09-26得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
