v-for 在 vue.js 中不使用 html 元素

Posted 2023-02-22

【中文标题】v-for 在 vue.js 中不使用 html 元素

【英文标题】：v-for without using html element in vue.js

【发布时间】：2019-09-15 19:36:44

【问题描述】：

我是 Vue.js 的新手

我正在准备输入元素练习的演示，这是我的代码。

HTML

<div id="inputDiv">
  <form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
      <input type="radio" :name="gender" v-model="gender" value="male">Male
      <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <div v-for="hobby in hobbies">
      <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">hobby
    </div>
  </form>
</div>

脚本

const inputApp = new Vue(
  el: '#inputDiv',
  data: 
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  
)

在这里您可以看到，要显示带有标签的爱好，我必须使用 parent 进行迭代，

添加 div 不是我想要的，如果我会在输入元素中 v-for 像：

<input 
  type="checkbox" 
  v-for="hobby in hobbies" 
  v-model="userHobbies" 
  v-bind:value="hobby"
>hobby

这是抛出异常[Vue警告]：属性或方法“爱好”未在实例上定义

我的问题是是否有任何替代方法可以在不使用 html 元素的情况下使用 v-for 对象元素？

【参考方案1】：

将其包装在template 标签中，因为模板标签不会出现在最终呈现的 HTML 中：

<template v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">hobby
</template>

或者更好的是，改进你的标记语义并使用标签：

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> hobby
</label>

【参考方案2】：

您可以在 div 中添加模板，因为模板不会呈现到 DOM：

  <div id="inputDiv">
    <form action>
      <input type="text" v-model="first_name">
      <input type="text" v-model="last_name">
      <input type="email" v-model="email">
      <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
      </div>
      <textarea v-model="address" id cols="30" rows="10"></textarea>
      <br>
      <template v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">
        hobby
      </template>
    </form>
  </div>

【参考方案3】：

问题在于，标记后的字符串插值hobby 在循环之外，这就是显示错误的原因，在这种特定情况下，您 必须 将其包装在某些东西中。

如果您不想专门使用 div，您可以使用 label 代替，这在这种情况下更加自然，现在如果用户点击标签，复选框将自动被选中。

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> hobby <br>
</label>

new Vue(
  el: '#inputDiv',
  data: 
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="inputDiv">
<form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <label v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">hobby
        <br>
    </label>
</form>
 userHobbies | json 
</div>