Question

var loaderGif = "https://www.tietennis.com/img/loaders/LoaderIcon.gif"

var processingImageUrl = '<img id="imgProcessing" src="' + loaderGif + '" />'

$(document).on("click", "input[name='PermissionID']", function() {
    var PermissionCheckBox = $(this)[0];

    $.ajax({
        method: "POST",
        url:    "https://httpbin.org/post",
        cache:  false,
        async:  true,
        beforeSend: function(xhr, opts) {
            $(PermissionCheckBox).after(processingImageUrl);
        },
        success: function(result) {
            $(PermissionCheckBox).parent().find('#imgProcessing').remove();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
             Check me:
             <input name="PermissionID" type="checkbox" value="1">
        </td>
    </tr>
</table>

我实际上是在尝试将jQuery代码转换为vue.js。

我正试图找到一种方法，如果我可以在vue.js上单击复选框放置图像。

我尝试了以下代码，但现在确定如何使用从复选框传递的事件来添加图像并将其删除

updatePermission(roleModulePermissionID, event) {
}

你能为此提出建议吗？

Answer 1

在Vue中，您（最佳地）不直接操纵DOM。您操纵data并配置模板以根据您的需要对该数据做出反应。

要创建多行，请使用v-for。

因此，例如，而不是添加和删除 a＆＃34;加载图片＆＃34;，您将创建一个<img>，其显示依赖于某些标记来自您的data ，请说permission.loading：

<img v-show="permission.loading" :src="loadingImg">

这样，当您将permission.loading设置为true时，就会显示加载图片。当您将permission.loading设置为false时，它将隐藏。

由于您希望在Ajax执行时显示它，因此在调用Ajax（下面的permission.loading）之前将true设置为fetch()并将permission.loading设置为{{ 1}}完成后。

以下完整演示。

＆＃13;

false

＆＃13;

new Vue({
  el: '#app',
  data: {
    loadingImg: "https://www.tietennis.com/img/loaders/LoaderIcon.gif", // for demo purposes
    permissions: [{
      id: 1,
      label: 'Permission to Take off',
      ticked: false,
      loading: false,
      postURL: "https://httpbin.org/post?take-off" // demo URL
    },{
      id: 2,
      label: 'Permission to Board',
      ticked: true,
      loading: false,
      postURL: "https://httpbin.org/post?board" // demo URL
    },{
      id: 3,
      label: 'Permission to Land',
      ticked: false,
      loading: false,
      postURL: "https://httpbin.org/post?land" // demo URL
    }]
  },
  methods: {
    updatePermission(permission) {
      permission.loading = true; // set loading and image will be shown
      fetch(permission.postURL, {method: "POST", body: {}})
        .then(() => permission.loading = false); // setting to false will make it disappear
    }
  }
})

＆＃13;

img { height: 17px; margin-bottom: -1px; }

＆＃13;

我还会添加<script src="https://unpkg.com/vue"></script> <div id="app"> <table> <tr v-for="permission in permissions"> <td> <label> {{ permission.label }}: <input name="PermissionID" type="checkbox" :value="permission.id" @change="updatePermission(permission)" v-model="permission.ticked" :disabled="permission.loading"> </label> <img v-show="permission.loading" :src="loadingImg"> </td> </tr> </table> </div>以防止在加载时再次点击。

在vue.js中动态添加/删除图像

1 个答案: