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

Posted 2023-02-22

【中文标题】在 vue.js 中动态添加/删除图像

【英文标题】：dynamically add/remove image in vue.js

【发布时间】：2018-08-31 07:47:19

【问题描述】：

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) 

你能为此提出一些建议吗？

【问题讨论】：

嗯.. Vue 在哪里？这似乎与vue没有任何关系。这是什么？

是的，在 Vue 中，这将是一个简单的 v-if 元素，但这里没有 Vue。

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

【讨论】：

实际上表格中会有很多复选框是动态渲染的。你能建议一下吗？

您可以使用v-for。给我一秒钟。

已更新。看看吧。

完美运行。只剩下一件事，我的图像具有这样定义的 src 属性。 <img v-if="ModulePermission.loading" :src="this.$root.domain_Name + 'Images/ajax-loader.gif'" /> 我认为当单击复选框并更新组件中的加载属性时出现问题，那时我收到错误：无法读取未定义的属性'domain_Name'，但事实并非如此在加载时或点击时。我可以确认我使用相同的属性来连接帖子网址。

如果 url 是这样就没有问题：tietennis.com/img/loaders/LoaderIcon.gif 其他组件也没有问题，因为我使用的是相同的代码。我假设它是 2 路过程，这就是发生某些事情的原因。