为什么在向可观察对象添加属性时会出现TypeError
在向可观察对象添加属性时出现TypeError的原因是因为可观察对象是一种特殊的对象，它的属性被限制为只读。这意味着我们不能直接向可观察对象添加新的属性。
可观察对象是一种用于实现响应式编程的设计模式，它允许我们在对象的属性发生变化时自动触发相关的操作。在JavaScript中，我们可以使用一些库或框架（如Vue.js、React.js等）来创建可观察对象。
当我们尝试向可观察对象添加属性时，JavaScript引擎会检测到这个操作是不允许的，并抛出一个TypeError。这是因为可观察对象的属性是由特殊的getter和setter函数控制的，我们不能直接修改或添加新的属性。
如果我们需要向可观察对象添加新的属性，可以通过使用特定的方法或函数来实现。例如，在Vue.js中，我们可以使用Vue.set()方法来向可观察对象添加新的属性。在React.js中，我们可以使用setState()方法来更新对象的状态，从而间接地添加新的属性。
总结起来，向可观察对象添加属性会出现TypeError的原因是因为可观察对象的属性是只读的，我们不能直接修改或添加新的属性。如果需要添加新的属性，可以使用特定的方法或函数来实现。
相关·内容
1回答
我是基于一个对象来呈现一个列表。通过突变，我给这个对象添加了新的元素。当我将this.$store.state.myObject记录到控制台时，我可以看到它正在更新。但是，我的列表没有更新。
实际上，我很幸运，我通过在我的突变中添加下面的代码行来解决这个问题，。(我发现这可以帮助DOM更新。)
但我想知道这是否是一个好的解决方案。
state.realms = Object.assign({}, state.realms)
这是我的全部变异：
addToRealms: (state, val) => {
var id = val.id
var realmN
浏览 7提问于2020-07-07得票数 1
我有这个密码。这纯粹是为了实验目的：
test.html
<div id="example-1">
{{ stuff.dosobject.notlist }}
<button v-on:click="dostuff">DO STUFF</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="te
浏览 0提问于2018-09-20得票数 3
在下面的示例中，v-if相关的div似乎都不是在单击Add按钮之前或之后呈现的。似乎在更新pizzas对象时，Vue.js没有运行任何更新。
有没有办法解决这个问题，而不需要把比萨变量变成数组呢？
<div id="app">
<div v-for="pizza in pizzas">
{{ pizza }}
</div>
<div v-if="totalPizzas === 0">
No pizza. :(
</div>
<div v-if=&
浏览 1提问于2018-01-30得票数 2
回答已采纳
3回答
我们试图实现的是Vue.js中的日历，日历使用$ajax调用获取值。在此之后，我想操作vue.js中的一些子数据。
我花了2个hours+来寻找一种潜在的方法来使用这个方法，但是我似乎找不到在数据对象的动态子对象中针对一个属性的方法。
我最后一次尝试的是使用'$refs‘呼叫，这个方法正在做我需要的事情。但我想我不能用这种方式处理孩子们的数据。
我的vue对象现在看起来是这样的：
var app = new Vue({
el: '#aankomende-week',
data: {
calendar: '&
浏览 1提问于2019-03-26得票数 0
回答已采纳
1回答
我是Vue.js的新手。在这里，我试图实现一些从Restful返回的JSON对象的呈现。当我从某个控件调用allListing(streamid)时，需要呈现从API接收到的已更改的JSON。花了一整天之后，我想问这里。
提前谢谢。
callListing(1);
function callListing(streamid) {
var vm = new Vue({
el: '#app',
data() {
return {
info: []
}
},
created() {
axi
浏览 2提问于2021-01-25得票数 0
回答已采纳
1回答
使用Vue.js，可以将表单输入绑定到属性：
不过，我正在进行一个“动态”生成表单的项目。在这里，v模型绑定只是根据输入的名称来设置的属性。
但问题是，我不知道如何正确地获得这些v模型绑定。到目前为止，我看到的只是人们手动为绑定在Vue实例上设置一个属性：
new Vue({
el: '...',
data: {
checkedNames: []
}
})
是否可以在不手动设置数据属性的情况下获取所有v-model绑定？
当创建一个带有变化的动态表单时，一个动态的字段数，这将非常有帮助。
我想有一种选择就是使用javascript从输入中检索名称atrib
浏览 3提问于2017-04-13得票数 2
回答已采纳
有没有一种方法可以在vue.js中以编程方式更新data对象/属性？例如，当我的组件加载时，我的数据对象是：
data: function () {
return {
cars: true,
}
}
在触发事件之后，我希望data对象看起来像这样：
data: function () {
return {
cars: true,
planes: true
}
}
我试过了：
<script>
module.exports = {
data: function () {
ret
浏览 2提问于2016-11-07得票数 10
回答已采纳
在axios get请求之后，Vue.js中的超文本标记语言没有更新。HTML是：
<span @click="tryResponse">
Data_object: {{ data_object }} <br>
Data_object.serial: {{ data_object.serial }} <br>
</span>
数据：
data(){
return{
data_object: {},
}
},
方法：
methods: {
tryResp
浏览 8提问于2020-02-05得票数 0
回答已采纳
在Vue.js中，有一些方法；Vue.set用于添加，Vue.delete用于删除，但是对于“update”，没有Vue方法，而是使用Object.assign。实际上，如果嵌套对象中没有任何更改，这是很好的。在Vue中是否有像update或refresh这样的函数，因为我在Chrome扩展选项卡中看到状态发生了变化，但是没有看到网页中的变化。
Vue视图不会为更新触发。
当我在“house”中添加一个项目时，我无法在页面上看到新的房子，甚至我可以在检查Vue，state上看到新的项目。当我重新加载页面时，我可以看到新的项目。
"clients": {
"
浏览 3提问于2020-04-01得票数 1
关于Vue.js的文档提到
属性必须存在于数据对象中，以便Vue将其转换并使其具有反应性。
(...)
您必须通过预先声明所有根级别的反应性数据属性来初始化Vue实例，即使只是使用一个空值。
考虑这两个代码片段，其中tags被定义为一个空对象，并在脚本过程中更新，有两种不同的方式：
var vm = new Vue({
el: "#root",
data: {
tags: {}
}
});
vm.tags = {
hello: true,
world: true
};
<script src="https://cd
浏览 5提问于2017-06-03得票数 3
回答已采纳
我有一个vue.js组件，它由一个搜索字段组成，该字段查询Google (为简单起见删除)。响应是带有位置的列表复选框。当用户检查一个位置时，我希望在所选择的对象上将一个标志checked设置为true。
但是，我也希望使该属性具有反应性，但在运行时添加反应性属性不起作用(请参见)。
<template>
<form>
<input type="text" ref="complete" v-bind:placeholder="placeholder">
<fieldset v-if=&
浏览 0提问于2016-10-19得票数 1
回答已采纳
我正在使用Vue.js，我想
我想按this.hintvariableA.variableB =1这样的变量设置提示值
我怎么能做到呢？
data: {
hint: [{a:0,b:0,c:0},{a:0,b:0,c:0},{a:0,b:0,c:0}],
}
methods: {
selectHint(){
this.setHint(0,a)
},
setHint(i,j){
this.hint[i].j = 1
},
},
浏览 4提问于2022-08-17得票数 -1
回答已采纳
例如：
我需要在新的vue之后添加数据值，并为数据绑定工作。
为什么我要这么做：
我认识it's work if i declare first on new Vue object。
但是有一个有很多布局主题页的老项目，如果我需要添加一个vue全局变量，那么我需要编辑每个页面的vue数据值。
我所期望的是：
var app = new Vue({
el: '#app',
data: {}
})
app.$data.message = "test"
<script src="https://cdnjs.cloudflare.com
浏览 5提问于2020-04-13得票数 1
回答已采纳
我有一个特定的模型，其中有多个值，可以通过网页上的表单进行更新。其价值有“量”、“率”、“量”、“净率”等。
问题是，我使用v-model将这些值与我的输入绑定在一起，除了“净速率”字段之外，它对所有字段都非常完美！它不是实时更新值，但是当我在字段中更新一些值并单击Vue-devtools UI上的刷新时，它就会被更新！只是当字段中的值发生变化时，它就不会被更新。这也适用于一个名为"net_rate“的特定字段！
我不知道这是怎么回事！这是我的代码，id discount_perc的第一个字段工作得很好！当我更新该字段中的任何内容时，只要在字段中编辑值，它就会被更新。但是net_rat
浏览 0提问于2018-10-11得票数 2
我使用一个对象items来显示v-for输入的列表。
items在组件mounted时被更新，但它最初只显示两个输入。
第三个输入将在单击按钮或键入输入后显示。但是items值不会在第三个输入更改时更新。
我在想
为什么第三项一开始没有显示。(我猜Vue没有跟踪用于更新视图的对象更改？)为什么单击按钮为什么第三项中的值没有更新。
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
show: true,
items: {
浏览 1提问于2022-04-25得票数 0
我在一个网络项目中使用vue.js版本2。
我知道反应性对于向对象添加新成员有一些限制。
也就是说，我正在处理一个相对复杂的数据对象，它有大量嵌套成员、子对象数组等等。
现在，我正在使用计算属性来获取/设置特定组件中的一些成员，并且使用lodadh _.set获取/设置这些嵌套属性。
例如：_.set(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber')
我的问题是，除了GeneralData之外，其余的部分不可能存在，因此整个事情都是没有反应的。
我如何在vue.js中实现这一点？我尝试使用由$set提供的vue.js函
浏览 2提问于2018-12-03得票数 5
回答已采纳
我有一个页面，其中的字段名称是数组类型。
eg. mapping[map][email_address][type]
现在在Vue中，我想设置默认值，如下所示
new Vue({
el: '#configure',
data: {
mapping: {
map: {
email_address: {
type: 'incoming_field'
}
}
}
浏览 16提问于2017-03-03得票数 0
我在vuejs挂载钩子中添加了一些动态数据到模型中，但是当它第一次挂载时，它会工作并查看更新，但是当我进行更改时，这个模型视图不会更新。
{
props: {
requestall: Object,
category_field_options: Array,
},
data(){
return {
field_options: {},
};
},
mounted(){
for(var field of this.category_field_opti
浏览 1提问于2020-01-22得票数 0
1回答
vue js不会立即触发
、、、
我的HTML代码：
<div id="app">
<table>
<thead>
<tr>
<th>#</th>
<th>title</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr v-for="wage_definition in wage_definitions
浏览 0提问于2018-03-12得票数 1
回答已采纳
我有一家Vuex商店，里面有一个物品：
state: {
contents: {},
}
在其中，我按键动态地存储内容：
mutations: {
updateContent: (state, { id, a, b }) => {
Vue.set(state.contents, id, { a, b });
},
}
让他们使用：
getters: {
content: (state) => (id) => {
if (id in state.contents) return state.contents[id];
浏览 4提问于2020-06-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
