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

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。

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

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

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

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

下面的完整演示。

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" 以防止在加载时再次单击。