vue 对象中数组中对象某个属性更改_Vue 列表渲染中修改数组元素（对象）的某个属性，但不能触发视图更新。...

<template>

<div class="reply-list">

<div class="header">

<h4>评论 已有<span>{{replies.length}}</span>回复</h4>

</div>

<ul>

<li v-for="reply in replies">

<div class="user">

<div class="left">

<img :src="reply.author.avatar_url" alt="">

<div>

<p class="author">{{reply.author.loginname}}</p>

<p class="post_time">发帖时间：{{reply.create_at}}</p>

</div>

</div>

<div class="right">

<div class="like-btn">

<i class="iconfont"></i>{{reply.ups.length}}

</div>

<div class="reply-btn" @click="toggleReply($index)">

<i class="iconfont"></i>

</div>

</div>

</div>

<div class="reply-content">

{{{reply.content}}}

</div>

<div class="reply-form" v-if="reply.isShowReply">

<textarea name=""></textarea>

<button type="button">确定</button>

</div>

</li>

</ul>

</div>

</template>

<script>

export default {

data: function(){

return{

}

},

props: {

replies: {

type: Array,

required: true,

default: []

}

},

created: function(){

this.replies.forEach(function(reply, index){

reply.isShowReply = false;

})

},

methods: {

toggleReply: function(index){

console.log(index)

var temReplyObj = this.replies[index];

temReplyObj.isShowReply = !temReplyObj.isShowReply;

this.replies.splice(index, 1, temReplyObj);

}

}

}

</script>

我想实现的效果是：点击回复按钮，然后在被点击的某条评论下弹出回复框。

Vue 列表渲染-问题 :

Vue.js 不能检测到下面数组变化：

直接用索引设置元素，如 vm.items[0] = {}；

修改数据的长度，如 vm.items.length = 0。

由于数组元素是一个复杂的对象，而我只是想修改一个属性的值，难道要深复制该对象？或者有什么其它思路能实现我这种效果呢？

不太理解你的疑問在哪裡，因為

Vue

不能偵測的是直接對著數組的某個索引賦值，例如

replys[1] = {}

，但是你這邊是對數組裡面的某個元素賦值，

Vue

是可以偵測到的，

Vue

是通過監測

get

,

set

來得知數據是否更新，而數組的索引是沒有

get

、

set

的，所以

Vue

才沒辦法監聽，這是

javascript

語言特性的限制，不過可以透過

replys.$set(1, {})

來代替，效果一樣，因為這裡是包裝過的方法，是對數組本身做操作，所以可以監聽得到。

例子