使用vue在一个大循环渲染其中的小循环渲染问题

Posted 2023-04-06

使用vue在一个大循环渲染其中的小循环渲染点击其中一个其他大循环中相同的class的div也受到点击事件的影响

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div> 参考技术A

@click.stop
事件修饰符阻止冒泡

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
 
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
 
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

在循环中渲染复选框并在 Vue JS 中绑定它们的值

【中文标题】在循环中渲染复选框并在 Vue JS 中绑定它们的值

【英文标题】：Render checkboxes in For in loop and bind their Values in Vue JS

【发布时间】：2018-10-07 13:52:42

【问题描述】：

我正在尝试使用多个复选框的组合创建一些过滤器来过滤数据库中的数据。像这样。

我正在从登录页面重定向到此页面，其中列出了一些获取变量的属性。就我而言，我在这个请求中有 3 个 get 变量。 $location、$type 和 $price。 现在我想要 $location 变量中的任何位置，应选中与 $location 具有相同值的复选框。 以我为例：如果我的 $location == candolim 则应自动选中 candolim 复选框。

然后我将使用它向服务器发送 AJAX 请求以获取属性。 现在我在这里使用 Laravel 和 Vue Js。用于请求的 Axios。

所以最初当我从登陆页面搜索过滤器重定向到这里时；在请求中有名为 $locaton、$type 和 $price 的变量。 这里我使用的是 Vue js。每当加载页面并创建 Vue 实例时，我都会获取数据库中所有可用的位置，并在此处使用复选框显示它们。 所以这就是我的显示方式：

   <p>SEARCH BY LOCATION</p>
<span v-for="item in allLocations">
<input type="checkbox"> <span class="checkbox-label"> @item.location </span> <br>
</span>
<hr>

所以现在我的问题是如何获取使用 Vue 单击的每个复选框的值？ 以及如何检查与使用 get 请求从登录页面获取的 $location 值相同的复选框？

我知道伙计们，这个问题非常令人困惑，但这就是我可以解释我想要什么的方式。 请帮忙。 谢谢。

【参考方案1】：

只需将所有要选择的值保留在 data 的数组字段中，例如selectedLocations，然后为每个复选框将value 属性设置为必须使复选框被选中的相应值，并为每个复选框使用与v-model 相同的selectedLocations。

指南的Form Input Bindings - Checkbox 部分对此进行了说明。

演示

new Vue(
  el: '#app',
  data: 
    allLocations: [
       location: 'candolim' ,
       location: 'baga' ,
    ],
    selectedLocations: [ 'candolim' ]     // you can set this from your $location (but make sure selectedLocations is an array)
  
)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
  <p>SEARCH BY LOCATION</p>
  <span v-for="item in allLocations">
    <input type="checkbox" :value="item.location" v-model="selectedLocations"> <span class="checkbox-label"> item.location </span> <br>
  </span>
  <hr>
  <span>Selected locations:  selectedLocations </span>
</div>

【讨论】：

谢谢您，先生，您的回答。它的工作，但仍然，我没有得到我的另一个问题的答案。如果我在 PHP 变量中获得任何一个位置，那么我想选中该复选框。例如。在这里，如果我的 $location == candolim 那么我需要检查我的复选框。谢谢。

另一个问题是什么？如果您想要复选框的值，请将其作为数组保存在 selectedLocations 中。如果要将其发送到 php，则必须例如通过表单或 FormData 发送。

我明白了。非常感谢）它对我帮助很大。

将新对象推入数组时不起作用，它返回null？