VueJs 理解 v-model 和 v-on:click答案

【问题标题】：VueJs Understanding v-model and v-on:clickVueJs 理解 v-model 和 v-on:click
【发布时间】：2020-06-08 08:27:56
【问题描述】：

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

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

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

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

我添加了一个 jsFiddle 来了解我想要完成的工作。我使用 axios 获取返回 products 表视图的路由。

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

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

【问题讨论】：

嗨，你的 JSFiddle 坏了。请至少修复您的 JSFiddle，然后您可能会得到一些答案。

标签： javascript vue.js axios v-model

【解决方案1】：

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

执行此操作的正确方法是将列表存储在 Vuex-Store 中并在其中执行更新。我建议使用此处提供的优秀文档阅读该主题：https://vuex.vuejs.org/

【讨论】：

Vuex 对于刚入门并尝试从 jQuery 背景学习 Vue 的人来说可能有点沉重。 Vuex 对于他的用例来说不是必需的，但你是正确的，由于 DOM 操作，反应性被破坏了。
公平点，Vuex 不是必须的。话虽如此，作为一个初学者，我发现用 Vuex 做一些非常相似的事情实际上比没有它更容易。

【解决方案2】：

我会将 products 的对象传递给 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>

【讨论】：

所以我想，如果我只是在 db vue 中使用新订单更新行后使用 get 重新加载包含产品行的表，则会看到 v-models 和 v-onclicks会再次出现，一切都会继续工作。
@user960722 我并没有真正关注您使用fetchProducts 和reload 方法所做的事情。我认为使用 php 构建列表而不是 vue 中的产品数据可能是您的问题？
fetchProducts 返回一个 json 数组，其中包含您在 data 属性中看到的产品。我认为我可能需要在通过 axios get 重新加载表格后刷新这些内容以使 v-model 再次看到它们？
@user960722 在这种情况下，只需再次调用fetchProducts 而不是重新加载并让它更新产品