uni-app 使用vue.js if判断后点击事件不起作用

uni-app 使用vue.js if判断后点击事件不起作用

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| HBuilderX | 3.1.14 | 云端         |

产品分类：HTML5+

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：小米

手机机型：mix 2

### 示例代码：

```html
<div class="remarks" v-if="opportunityinfo.phase_id ==2">  
    <label>解决方案:</label>  
    <div class="remark_left annex">  
         <p class="annex-item" v-for="(item, index) in opportunityinfo.solufile"  :data-url="item.src">{{item.name}}</p>  
    </div>  
</div>  

js 代码  
(function($, doc) {  

$(".annex").on('tap', '.annex-item', function() {  
                var url= this.getAttribute("data-url");  
                console.log(url)  
                var name=url.substring(url.lastIndexOf("/")+1);  
                var namerul="_downloads/"+name;  
                console.log(namerul)  
                // 判断本地文件是否存在，存在则直接打开，不存在则下载打开                    
                plus.io.resolveLocalFileSystemURL(namerul, function( entry ) {  
                    console.log('已下载')  
                    plus.runtime.openFile(namerul);  
                }, function ( e ) {  
                    console.log('未下载')    
                    var dtask = plus.downloader.createDownload(url, {}, function(d, status){  
                            // 下载完成  
                            if(status == 200){   
                                console.log("Download success: " + d.filename);  
                                plus.runtime.openFile(d.filename);  
                            } else {  
                                 console.log("Download failed: " + status);   
                            }    
                        });  
                    dtask.start();   
} );  

})(mui, document);

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

使用vue.js if判断后点击事件不起作用


更多关于uni-app 使用vue.js if判断后点击事件不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

用啥事件代理呀 换个思路 直接使用 @tap=" " 试试

更多关于uni-app 使用vue.js if判断后点击事件不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


嗯，谢谢，我也是用这个解决了

uniapp 打包成app是没有dom的，使用jQuery肯定不行。

在 uni-app 中，使用 v-if 动态渲染的元素，其事件绑定不应通过原生 DOM 操作（如 $(".annex").on('tap', ...)）处理，因为 v-if 会销毁和重建 DOM 节点，导致事件监听失效。以下是解决方案：

  1. 改用 Vue 的 @click 事件
    将 tap 事件改为 Vue 模板中的 @click，并直接在方法中处理逻辑：

    <p class="annex-item" 
   v-for="(item, index) in opportunityinfo.solufile"  
   :data-url="item.src"
   @click="handleFileClick(item.src)">
   {{item.name}}
</p>

  2. 在 Vue 方法中实现下载逻辑
    移除原有的 mui 事件绑定代码，在 methods 中定义：

    methods: {
  handleFileClick(url) {
    const name = url.substring(url.lastIndexOf("/") + 1);
    const localPath = `_downloads/${name}`;
    
    // 检查本地文件是否存在
    plus.io.resolveLocalFileSystemURL(localPath, 
      () => {
        plus.runtime.openFile(localPath); // 直接打开
      }, 
      () => {
        // 下载文件
        const dtask = plus.downloader.createDownload(url, {}, (d, status) => {
          status === 200 ? plus.runtime.openFile(d.filename) : console.log("下载失败");
        });
        dtask.start();
      }
    );
  }
}
回到顶部