如何使用 vuejs 从多个元素中定位特定单击的元素

Posted 2023-02-23

技术标签:

【中文标题】如何使用 vuejs 从多个元素中定位特定单击的元素【英文标题】：How to target the specific clicked element out of multiple elements with vuejs 【发布时间】：2019-05-10 16:47:58 【问题描述】：

总的来说，我对前端有点陌生，尤其是 vue.js。我试图制作一个包含 5 个元素的小型应用程序，每个元素实际上是从具有 2 个值的对象获取数据 - 名称和描述。此外，每个对象都在一个数组中。

名称默认显示为阻止，描述默认显示为无。我希望应用程序在我单击名称时显示要阻止的描述。这是整个代码，您可以在codepen上或本地运行它，它会毫无问题地运行。您可以忽略 body 标签上方的所有内容。

<html>
    <head>
        <style>
            *margin: 0px; padding: 0px; font-family: sans-serif; list-style-type: none; 
            bodybackground: #003366;
            #containerwidth: 1000px; margin: 100px auto;
            #elementswidth: 100%;
            #elements lidisplay: inline-block; width: 40%; margin: 40px 5%; background: #FFF; color: #003366; box-shadow: 10px 10px 0px #222; user-select: none;
            #elements li h1,h3padding: 10px 20px;
            #elements li h3display: none;
            #elements li h1cursor: pointer;
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <ul id='elements'>
                <li v-for="eleObject in eleObjects">
                    <h1 v-on:click="expand" v-text="eleObject.name"></h1>
                    <h3 v-text="eleObject.description"></h3>
                </li>
            </ul>
        </div>
    </body>

    <script>
        let elementList = new Vue(
            el: "#elements",
            data:
                eleObjects:[
                    name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website",
                    name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website",
                    name: "javascript 2015", description: "Used for event handling, functionality and dynamics of the website",
                    name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites",
                    name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
                ]
            ,
            methods:
                expand: function()

                
            
        );
    </script>
</html>

【问题讨论】：

【参考方案1】：

为了实现所需的行为，最好在对象上有一些属性来指示事物是否可见。

eleObjects:[
    name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website", visible: false,
    name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website", visible:  false,
    name: "JavaScript 2015", description: "Used for event handling, functionality and dynamics of the website", visible: false,
    name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites", visible: false,
    name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc...", visible: false
]

从v-for循环你可以得到索引，同样的索引传递给expand函数，所以你可以从方法中访问被点击的元素。

<li v-for="(eleObject, index) in eleObjects">
    <h1 @click="expand(index)" v-text="eleObject.name"></h1>
    <h3 v-show="eleObject.visible" v-text="eleObject.description"></h3>
</li>

expand 方法应该很简单，我们只想更新visible 被点击元素的状态。

expand: function(index)
   this.eleObjects[index].visible = !this.eleObjects[index].visible;

这是最终演示：https://jsbin.com/jiduzoduri/1/edit?html,js,output

【讨论】：

【参考方案2】：

在mounted 钩子中，您需要通过添加名为show 的新字段来更改eleObjects 数组项，该字段最初为false，并使用v-show 使用条件渲染，然后当您单击特定项目将被扩展

let elementList = new Vue(
  el: "#elements",
  data: 
    eleObjects: [
        name: "HTML5",
        description: "Used for front end web development more specifically for building the structure of a website"
      ,
      
        name: "CSS3",
        description: "Used for giving style to the HTML elements, their positioning and overall look of the website"
      ,
      
        name: "JavaScript 2015",
        description: "Used for event handling, functionality and dynamics of the website"
      ,
      
        name: "Vue JS",
        description: "JavaScript framework for component based programming which is used to create more dynamic websites"
      ,
      
        name: "Django.py",
        description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
      
    ]
  ,

  methods: 
    expand: function(el, i) 
      el.show = true;

      this.$set(this.eleObjects, i, el);
    
  ,
  mounted() 
    this.eleObjects = this.eleObjects.map(e => 
      let t = e;
      e.show = false;
      return t;
    );
  
);

* 
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  list-style-type: none;


body 
  background: #003366;


#container 
  width: 1000px;
  margin: 100px auto;


#elements 
  width: 100%;


#elements li 
  display: inline-block;
  width: 40%;
  margin: 40px 5%;
  background: #FFF;
  color: #003366;
  box-shadow: 10px 10px 0px #222;
  user-select: none;


#elements li h1,
h3 
  padding: 10px 20px;


#elements li h3 

#elements li h1 
  cursor: pointer;

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


<body>
  <div id="container">
    <ul id='elements'>
      <li v-for="(eleObject,i) in eleObjects">
        <h1 v-on:click="expand(eleObject,i)" v-text="eleObject.name"></h1>
        <h3 v-text="eleObject.description" v-show="eleObject.show"></h3>
      </li>
    </ul>
  </div>
</body>

【讨论】：

【参考方案3】：

正如您在其他答案中所读到的，您可以添加一个属性以查看它是否可见。另一种方法是你可以检查css并根据它是block还是none来更改它

let elementList = new Vue(
  el: "#elements",
  data: 
    eleObjects: [
        name: "HTML5",
        description: "Used for front end web development more specifically for building the structure of a website"
      ,
      
        name: "CSS3",
        description: "Used for giving style to the HTML elements, their positioning and overall look of the website"
      ,
      
        name: "JavaScript 2015",
        description: "Used for event handling, functionality and dynamics of the website"
      ,
      
        name: "Vue JS",
        description: "JavaScript framework for component based programming which is used to create more dynamic websites"
      ,
      
        name: "Django.py",
        description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
      
    ]
  ,

  methods: 
    expand: function(e) 
      let h3Element = e.target.nextElementSibling;
      h3Element.style.display = (h3Element.style.display === 'block')? 'none':'block';
    
  
);

* 
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  list-style-type: none;


body 
  background: #003366;


#container 
  width: 1000px;
  margin: 100px auto;


#elements 
  width: 100%;


#elements li 
  display: inline-block;
  width: 40%;
  margin: 40px 5%;
  background: #FFF;
  color: #003366;
  box-shadow: 10px 10px 0px #222;
  user-select: none;


#elements li h1,
h3 
  padding: 10px 20px;


#elements li h3 

#elements li h1 
  cursor: pointer;

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


<body>
  <div id="container">
    <ul id='elements'>
      <li v-for="(eleObject,i) in eleObjects">
        <h1 v-on:click="expand($event)" v-text="eleObject.name"></h1>
        <h3 v-text="eleObject.description" v-show="eleObject.show"></h3>
      </li>
    </ul>
  </div>
</body>

【讨论】：

以上是关于如何使用 vuejs 从多个元素中定位特定单击的元素的主要内容，如果未能解决你的问题，请参考以下文章

VueJS 将类切换到表中的特定元素

Swift flatMap：如何从数组中仅删除元组中特定元素为零的元组？

如何单击android应用程序中的特定元素？

如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序

我应该使用原始 js 还是 jquery 来定位 Vuejs 3 应用程序中的 DOM 元素？

如何使用 Selenium 和 Python 定位具有多个类名的元素