vueでは配列中の属性を変更し、ページ内では有効になりません。

問題の説明:
vueを使用して配列データを取得し、データを取得した後、各データにedit属性を追加し、初期値はfalseであり、リストの編集ボタンをクリックしたとき、保存と保存しないボタンの出現と消失を制御するため、配列中のedit属性を変更した後、画面は予定通りeditがtrueであるときに変更状態を表示し、editがfalseの場合は、ステータスは変更されません。
ソリューション:
editは、postメソッドでデータを取得した後、vueのdataデータに追加された属性であり、最初は受信したデータの割当値をvueのdataの中に入れて、vueのdataのデータにedit属性を追加することで、editを変更した後、jsでconsolie.logを使ってこの値が変化したが見られますが、ページのdata値は変化しません。
正しいやり方は、まず受信したデータのためにedit属性を初期化し、処理後のデータをvueのdataに割り当てなければならない。
コードは以下の通りです

<tbody>
     <tr v-for="(book,index) in bookList">
      <td>
       <span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //  edit   false，  span  
       <input v-show="book.edit" /> //  edit   true，  input  
      </td>
      <td>
       <a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //  edit   true，     (x)  
        <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
       <a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //  edit   true，    (√)  
        <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
       </a>
      </td>
      
     </tr>
    </tbody>

<script>

var politics = new Vue({

el:"#politics",

data:{

bookList:[]

},

methods:{

getBookList: function (offset, limit, CatalogueID, searchKey, resId) {
    this.limit = limit;
    this.offset = offset;
    this.CatalogueID = CatalogueID;
    this.searchKey = searchKey;
    this.resId = resId;
    this.$http.get("/BookAdmin/getBookList?offset=" + this.offset + "&limit=" + this.limit + "&CatalogueID=" + this.CatalogueID + "&searchKey=" + this.searchKey+"&resId="+this.resId)
     .then(function (resp) {
      resp.data.books.forEach(function (o, i) {
       o.edit = false;
      })
      this.bookList = resp.data.books; //               ，   edit         
      this.bookTotalCount = resp.data.totalCount;
      var pageNo = this.offset / this.limit + 1;
      var totalPage = Math.ceil(this.bookTotalCount / this.limit);
      
      divpager(pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId);
     })
   }

}

})


</script>

以上のvueでは配列の中の属性を変更して、ページの中で有効ではない解決方法は小編が皆さんに提供した内容の全てです。参考にしてほしいです。