Home > Article > Web Front-end > Introduction to the v for command in the vue component and analysis of alarm problems when using v-for

Introduction to the v for command in the vue component and analysis of alarm problems when using v-for

小云云Original: 2017-12-22 10:33:302824browse

We know that the basic use of v-for is v-for="item in list" or v-for="item of list" for traversal. This article mainly introduces how to solve the alarm problem when using v-for in the vue component. In the article, I introduce the v for command to everyone. Friends who need it can refer to it. I hope it can help everyone.

When running the v-for code snippet in the project,

<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> 
  <flexbox-item v-for="role in roles " > 
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button> 
  </flexbox-item> 
</flexbox> 
<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;">
  <flexbox-item v-for="role in roles " >
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button>
  </flexbox-item>
</flexbox>出现告警：component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

Solution:

Bind the key value in the code, which can be solved, such as:

<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> 
  <flexbox-item v-for="(role,index) in roles " :key="index" > 
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button> 
  </flexbox-item> 
</flexbox>

PS: Vue2 study notes :v-for command

1.Use

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:&#39;#box&#39;,
        data:{
          arr:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;],
          json:{a:&#39;a&#39;,b:&#39;b&#39;}
        }
      });
    }
  </script>
</head>
<body>
  <p id="box">
    <p>循环数组</p>
    <ul>
      <li v-for="a in arr">
      {{a}}
      </li>
    </ul>
    <hr>
    <p>循环出数组索引</p>
    <ul>
      <li v-for="(v,k) in arr">
      {{v}}==>{{k}}
　　　　　　　</li>
    </ul>
    <p>循环json</p>
    <ul>
      <li v-for="item in json">{{item}}</li>
    </ul>
    <p>循环json的键</p>
    <ul>
      <li v-for="(k,v) in json">
      {{k}}==>{{v}}
      </li>
    </ul>
  </p>
</body>
</html>

Result:

Summary

Regarding solving the alarm problem when using v-for in the vue component, I hope it will be helpful to everyone It's helpful. If you have any questions, please leave me a message and I will reply to you in time!

Related recommendations:

Vue.js Common Instructions - Tutorial on Looping the v-for Instruction

vue.js Instruction v-for Usage and index acquisition

Vue.js common instructions summary (v-if, v-for, etc.)

The above is the detailed content of Introduction to the v for command in the vue component and analysis of alarm problems when using v-for. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Examples to explain jQuery's implementation of checkbox instant modification and batch deletion functionsNext article：Examples to explain jQuery's implementation of checkbox instant modification and batch deletion functions

See more

Introduction to the v for command in the vue component and analysis of alarm problems when using v-for

Related articles