Javascript VueJs了解v-model和v-on：单击

我目前正试图学习来自jQuery背景的VueJ，我遇到了一些我不理解或试图做错事的事情。我用的是VueJS和Laravel。我将VUEJ添加到刀片模板中

我已经用几行数据设置了表。在这些行中，我有一个文本输入字段。每行还包含两个图标，允许我向上或向下移动该行

当我点击图标时，我想发送一个axios请求，告诉我的数据库更新订单字段。当它返回一条成功消息时，我想用新的顺序重新加载表

单击v-onclick图标并使用axios将表重新加载到my div后，v-onclick停止工作。另外，我设置的v-model绑定也停止工作。当我更新文本输入中的值时，它不再更新数据属性中的值

我添加了一个jsFiddle来说明我要实现的目标。 我使用axios获取返回products表视图的路由

            ```reload : function(){
                url = '/products;
                axios.get(url).then(response => {
                    document.getElementById('products').innerHTML = response.data;
                });
            },```

---

这不是在VueJS中更新表的正确方法。通过直接操作DOM，可以对Vue不跟踪（因此也不知道）的站点执行更改，这会破坏反应性

---

正确的方法是将列表存储在Vuex存储中并在其中执行更新。我建议您使用这里提供的优秀文档阅读本主题：

我将把产品对象传递给javascript，Laravel有一个Jeffrey Way提供的包

编辑：哦，取消那个，从你的坏小提琴上看，你想做些不同的事情

在axios响应处理程序中，只需使用响应数据更新产品的数据属性。然后在VUE中循环该属性，不需要PHP端循环

  <td v-for="product in products">
    <input v-model="product.id" type="text" :name="product.name">
  </td>

您好，您的JSFIDLE坏了。请至少修复您的JSFIDLE，然后您可能会得到一些答案。对于刚刚开始并试图从jQuery背景学习Vue的人来说，Vuex可能有点太重了。Vuex对于他的用例来说不是必需的，但您是正确的，因为DOM操作，反应性被破坏了。公平地说，Vuex没有必要这样做。尽管如此，作为一名初学者，我发现用Vuex做一些非常类似的事情实际上比不用Vuex更容易。因此我认为，如果在db vue中用新顺序更新包含产品行的表后，用get重新加载包含这些行的表，那么v-models和v-onclick将再次出现，一切都将保持不变正在工作。@user960722我并没有真正了解您对

fetchProducts

和

reload

方法的操作。我认为在vue中使用php构建列表而不是产品数据可能是您的问题？fetchProducts返回一个json数组，其中包含您在data属性中看到的产品。我想我可能需要在通过axios get重新加载表后刷新这些，以使v-model再次看到它们？@user960722在这种情况下，只需再次调用

fetchProducts

，而不是重新加载并让它更新产品