重新排列dom不綁定到vue數組實例？

現在我正在開發一個vue 2.x的Framework7應用程序。在我的應用程序中，有一個可通過拖放進行排序的列表。我可以直接在Framework7中使用可排序列表;但是，通過拖放進行排序後，vue實例中的相應列表數據不會更改。我不知道這是否是Framework7問題，並且相信的，它是VUE黑客，所以下面simplist代碼可以顯示我的問題：重新排列dom不綁定到vue數組實例？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sorting List</title> 
</head> 
<body> 
<div id="app"> 
    <ul> 
     <li v-for="item in list">{{ item }}</li> 
    </ul> 
    <p>Now items are: {{ list }}</p> 
    <p><button @click="operate">Click me to move the 2nd item before 1st one.</button></p> 
</div> 

<script src="lib/jquery-3.2.1.js"></script> 
<script src="lib/[email protected]"></script> 
<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      list: ['one', 'two', 'three'] 
     }, 
     methods: { 
      operate: function() { 
       // the following code simulate the Framework7 drag and drop effect 
       var li = $('ul li:eq(1)'); 
       li.remove(); 
       $('ul li:eq(0)').before(li); 

       // I want to search a method to update the list order, however, the following code cannot show my desired effect 
//    this.list = ['two', 'one', 'three']; // Not function 
      } 
     } 
    }); 
</script> 
</body> 
</html>

我點擊按鈕後所需的列表項成爲["two", "one", "three"]

來源

2017-05-06 Run

我覺得你的問題的核心是你正在修改DOM本身。您應該使用業務邏輯來修改數據，並且框架（Vue）將更改DOM以反映數據中的更改。對DOM進行更改不會導致數據更改。 – wing

@wing如果問題是關於使用拖放重新排列列表，那麼dom將更新數據。就像我們在任何應用中創建動態菜單一樣。 – Deepak

@Deepak：啊，我錯過了拖放的提及，並專注於排序的要求以及做了大量DOM修改的代碼。但是，是的，你是對的 - 在這種情況下，拖放元素（修改DOM）應該更新ViewModel。 – wing

Vue公司將處理DOM會自動更新，所以你只需要改變你operate方法數組中元素的順序和DOM將更新：

operate: function() { 
    this.list = ['two', 'one', 'three']; 
}

如果你真的要重新排列的列表，而不是完全重新定義它，你需要調用$set()或splice()陣列上（見common beginner gotchas）：

operate: function() { 
    var temp = this.list[0]; 
    this.list.$set(0, this.list[1]); 
    this.list.$set(1, temp); 
}

來源

2017-05-06 18:58:04 thanksd

不，不，不，也許我沒有明確表達我的問題。我爲我的小應用程序使用了Framework7，拖放邏輯由Framework7自動處理。所以dom的操作代碼只是模擬效果，它不能被刪除。 – Run

@在這種情況下，你應該使用一個適用於Framework7的vue插件：https：//framework7.io/vue/ – thanksd

重新排列dom不綁定到vue數組實例？

回答

相關問題