記如何解決vue父元件改變不了子元件props傳過來的陣列

MayDo發表於2018-12-24
Vue元件陣列

父元件：(元件內容寫個大概)

<template>
  <div class="feedback">
    <comment-item :commentList="commenList"></comment-list>
  </div>
</template>

<script>
import CommentItem from '...' //匯入子元件
import {queryFeedBack} from '...'  //匯入資料介面

export default {
  data() {
     return {
       commentList: []
    }
  },
  mounted() {
   queryFeedBack(查詢條件),then(res => {
     this.commentList = res.page.list
   })
  }
}
</script>複製程式碼

子元件CommentItem（元件寫個大概）

<template>
   <ul>
     <li v-for="item in dataset">  //dataset是loadsh處理過的資料
       <div class="right-panel">
         <el-button @click="(item.showPanel = !item.showPanel)">我來回復：</el-button>
          <!--點選我來回復：點選一次顯示，再點選一次不顯示-->
         <div v-show="item.showPanel">  這個showpanel是在父元件裡面新加的屬性
           <input  v-model="item.replyText">
           <button @click="submitReply(item)">提交回復</button>
         </div>
       </div>
     </li>
   </ul>
</template>

<script>
import _ from 'loadsh' //匯入的這個工具我做了一會功課，裡面封裝了很多字串、陣列、物件等常見資料型別的處理函式
// lodash的所有函式都不會在原有的資料上進行操作，而是複製出一個新的資料而不改變原有資料，下面需要仔細去看一下這個工具的使用。

export default {
  props: {
    commentList: {
      type: Array,
      default() {
         []
        }
     }
   },
   data() {
     return {
       dataset: []  //複製了個陣列來處理
      }
     },
   watch: {  //這裡是重點，用到了loadsh處理函式
    commentList: {
     immediate: true,
     handler(value) {   //好好理解下面這句處理
       this.dataset = _.map(value || [],item => _.extend({showPanel:false,replyText: null}, item))
     }
    }
   },
methods: {
  submitReply(data) {  
    data.replyText = null   //提交完文字框需要清空
  }
}
 }
</script>複製程式碼

總結：

一定要了解loadsh工具箱怎麼用，陣列寫在props裡面，陣列的值在父元件中很難被改變，需要藉助loadsh工具箱在子元件中進行處理。


相關文章