在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在写一个tree组件的过程中,在新建节点的时候遇到一个问题;
描述:当props取来的对象中有children属性,那么这个就是文件夹,可以展开子节点希望实现,部分末端子节点没有children属性,但是可以添加子节点,使之成为文件夹通过查看文档,使用了$set的方法为原对象添加属性,结果提示错误
代码如下:html:
&ul class="rs_tree"&
&li v-for="node in treeData"&
&div @click="childrenShow(node,$event)" class="rs_tree_text"&
&span class="rs_tree_dot" v-if="!isFolder(node)"&&/span&
&em class="fa fa-folder" v-if="isFolder(node)&&!node.isShow"&&/em&
&em class="fa fa-folder-open" v-if="isFolder(node)&&node.isShow"&&/em&
&span class="rs_tree_label"&{{node.text}}&/span&
&input type="text" class="rs_edit_input" v-model="node.text" @click="stop($event)" @keyup.enter="editEnd()"&
&div class="rs_tree_icon" v-if="node.add" @click="addItem(node,$event)" title="新增"&&i class="fa fa-plus"&&/i&&/div&
&div class="rs_tree_icon" v-if="node.edit" @click="editItem(node,$event)" title="编辑"&&i class="fa fa-edit"&&/i&&/div&
&div class="rs_tree_icon" v-if="node.del" @click="delItem(node,$event)" title="删除"&&i class="fa fa-trash"&&/i&&/div&
&items v-if="isFolder(node)" v-show="node.isShow" :tree-data="node.children" transition="node-down"&&/items&
addItem(node,e){
e.stopPropagation();
node.isShow =
if(node.children)
console.log(node);
node.children.unshift({
text : '新建文件',
add : true,
edit : true,
del : true,
console.log(node);
node.$set('children',[{
text : '新建文件',
add : true,
edit : true,
del : true,
console.log(this.treeData);
this.editEnd();
treeDate:[
text : '中国',
add : true,
edit : true,
del : false,
isShow : false,
children : [{
text : '辽宁',
add : true,
edit : true,
del : true,
isShow : true,
children : [{
text : '沈阳',
add : true,
edit : true,
del : true,
text : '大连',
add : false,
edit : true,
del : true,
text : '鞍山',
add : false,
edit : true,
del : true,
text : '抚顺',
add : false,
edit : true,
del : true,
当我点击"中国","辽宁"等edit,因为有children所以能为children添加数组,但是我点击"沈阳"或者新建的子节点时,我想添加children属性却不行
错误提示如下
请问应该怎么添加children属性,谢谢PS:这个tree进行了组件递归,嵌套其他组件时出现很多问题,如:dialog组件弹出重复,位置不对等问题.请问有什么好的解决办法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
set不是这么用的，应该是
Vue.set(node, 'children', [{text : '新建文件', add : true, edit : true, del : true}])
this.$set(node, 'children', [{text : '新建文件', add : true, edit : true, del : true}])
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
研究下官方的这例子
仔细查看，这里就有添加子节点的逻辑
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。vue 数组和对象不能直接赋值情况和解决方法(推荐)
转载 & & 作者：小码农雯
这篇文章主要介绍了vue 数组和对象不能直接赋值情况和解决方法,需要的朋友可以参考下
Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
当第一种情况需求时，可以使用this.$set(this.arr,index,newVal)
Vue 不能检测对象属性的添加或删除：
　　可以使用this.$set(this.person,'age',12)
&&&& 当需要添加多个对象时，Object.assign({},this.person,{age:12,name:'wee'})
PS：Vue实现对数组、对象的深拷贝、复制
当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下
var a = [1,2,3];
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]
var obj = {a:10};
var obj2 =
obj2.a = 20; // obj2.a改变了，
alert(obj.a); // 20，obj的a跟着改变
这就是由于对象类型直接赋值，只是将引用指向同一个地址，导致修改了obj会导致obj2也被修改
所以在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决
computed: {
data: function () {
var obj={};
obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象
return obj
以上所述是小编给大家介绍的vue 数组和对象不能直接赋值情况和解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具因为vue里面的data是用get赋值的，所以无法用delete，
这时你可以用Object.defineProperty()
Object.defineProperty(basic,'photo',{enumerable:false}); //将这个对象某个属性设置成不可枚举
Views(...) Comments()为什么vue里面data里面的对象，无法用delete删除属性
时间： 22:12:09
&&&& 阅读：79
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
因为vue里面的data是用get赋值的，所以无法用delete，
这时你可以用Object.defineProperty()
Object.defineProperty(basic,‘photo‘,{enumerable:false}); //将这个对象某个属性设置成不可枚举
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文地址：https://www.cnblogs.com/yangwang12345/p/8394655.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！> 博客详情
Vue 是可以跟踪普通对象变化的.
&ul id="repeat-object" class="demo"&
&li v-for="value in object"&
{{ $key }} : {{ value }}
在遍历对象时，是按&Object.keys()&的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
但是如果你想动态的增加一个属性.比如
obj['addProp'] = 'abcd'
vue 是没有办法跟踪对象的变化的.
这时应该使用$set方法.让 Vue 建立跟踪.第一个参数是取值表达式,第二个是要设定的值.
this.$set("obj['addProp']", 'abcd')
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥