vuejs判断div内的input是不是有值

Posted 2023-05-11

参考技术A 使用jquery的each()方法遍历就可以了。具体实现方法如下： 假设该div的id为textbox，获取内部所有input[type='text']的代码： $("#textbox input[type='text']").each(function() alert($(this).val()) );本回答被提问者采纳

带链接的 Div 内的 VueJS 按钮也会触发 href 链接

【中文标题】带链接的 Div 内的 VueJS 按钮也会触发 href 链接

【英文标题】：VueJS Button inside Div with Link also triggers href link

【发布时间】：2020-08-02 22:13:29

【问题描述】：

我的html

<a href="/someplace">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</a>

然后是 Vue 组件……

<template>
  <div @click.stop="doAction">
  </div>
</template>

当 doAction 被调用时，它也会从它的父 div 触发 <a href="">。 我该如何阻止它这样做？ 我不希望父 div 成为组件的一部分，它只是一个表格视图。 我试过@click.stop 并通过doAction(event) 和event.stopPropagation();

任何其他想法，使用 vuejs 在点击行上有一个按钮似乎很简单？

【问题讨论】：

为什么要将 div 和组件包裹在锚标签内？？

它是一个表格，包含更多信息，一行，可点击。

【参考方案1】：

您想禁用默认行为。所以你需要.prevent

<template>
  <div @click.prevent="doAction">
  </div>
</template>

【参考方案2】：

使用 prevent 修饰符为锚点上的点击事件添加一个空处理程序：

 <a href="/someplace" @click.prevent="">

let app = new Vue(
  el: "#app",

  data() 
    return 


    ;
  ,
  methods: 
    doAction() 

      console.log("do action")
    
  

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="/someplace" @click.prevent="">
    <div>
      <div @click="doAction">
      do action
      </div>
      <span>Click row for more info</span>
    </div>
  </a>

</div>

【参考方案3】：

您要做的是将父级<a> 标记转换为普通的<div> 并使用.self 修饰符为其附加一个事件。这样，只有当您单击父 div 本身时才会处理单击，而不是当您单击其中的任何子元素时。

<div href="/someplace" @click.self="yourEventToOpenTheRow">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</div>