时间戳

首页 > 解决方案 > VueJs 理解 v-model 和 v-on:click

javascript - VueJs 理解 v-model 和 v-on:click

问题描述

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

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

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

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

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

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

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

标签： javascriptvue.jsaxiosv-model

解决方案

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

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

推荐阅读