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

问题描述

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.

I was actually trying to convert the jQuery code to vue.js.

我正在尝试找到一种方法，是否可以在vue.js中点击选中复选框.

I am trying to find a way if I could put the image with checkbox on click in vue.js.

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

I tried below code, but now sure how could I use event passed from checkbox to add image and remove it

updatePermission(roleModulePermissionID, event) {
}

您能为此建议些什么吗?

Can you suggest something for this?

推荐答案

在Vue中，您(最好)不直接操作DOM.您可以操纵data并配置模板以根据需要对这些数据做出反应.

In Vue, you (optimally) don't directly manipulate the DOM. You manipulate the data and configure the template to react to that data according to what you need.

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

To create multiple rows, use v-for.

因此，例如，而不是添加和删除正在加载图像"，您将创建一个<img>，其显示取决于您的data中的某些标志 >，说permission.loading:

So, for instance, instead of adding and removing a "loading image", you would create an <img> whose display depended on some flag from your data, say permission.loading:

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

这样，当您将permission.loading设置为true时，将显示正在加载的图像.将permission.loading设置为false时，它将隐藏.

That way, when you set permission.loading to true, the loading image will show. When you set permission.loading to false it will hide.

由于您想在Ajax执行时显示它，因此在调用Ajax(下面的fetch())之前将permission.loading设置为true，并在完成时将permission.loading设置为false.

Since you want to show it while the Ajax is performing, set permission.loading to true before calling the Ajax (the fetch() below) and set permission.loading to false when it completes.

下面的完整演示.

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
    }
  }
})

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

<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>

我还会添加:disabled="permission.loading"，以防止在加载时再次点击.

I also would add a :disabled="permission.loading" to prevent another click when it is loading.

这篇关于在vue.js中动态添加/删除图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！