重新排列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数组实例？

回答

相关问题