Question

我目前正在尝试从jQuery背景学习VueJS，但遇到了一些我不理解或尝试做错的事情。我正在使用VueJS和Laravel。我将VueJS添加到刀片模板中。

我在表中设置了几行数据。在这些行中，我有一个文本输入字段。每行还包含两个图标，使我可以上下移动行。

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

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

我添加了一个jsFiddle，以了解我要完成的工作。我使用axios获取返回产品表视图的路由。

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

https://jsfiddle.net/k8Lj4asb/1/

Answer 1

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

执行此操作的正确方法是将您的列表存储在Vuex存储中，然后在其中执行更新。我建议使用此处提供的出色文档来阅读有关该主题的内容：https://vuex.vuejs.org/

Answer 2

我会将产品的对象传递给javascript，Laravel为Jeffrey Way提供了https://github.com/laracasts/PHP-Vars-To-Js-Transformer的软件包。

编辑：哦，取消吧，它从破碎的小提琴中看起来是您尝试做不同的事情。

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

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

VueJs了解v-model和v-on：click

2 个答案: