Question

我的vue组件是这样的：

<template>
    ...
        <ul class="list-unstyled">
            <li v-for="category in categories">
                ... 
                    <input type="checkbox" :value="category.id" :checked="category.id in_array(categoryCountry)">  
                ...
            </li>
        </ul>
    ...
</template>

<script>
    export default {
        props: ['categoryCountry', 'categories'],
    }
</script>

我想改变输入中的条件

categoryCountry是数组，例如array(1,2,3)

因此，如果categoryCountry数组中的category.id，则会检查

我该怎么做？

Answer 1

最简单的答案。使用＆＃34;包括＆＃34;它检查数据是否存在于数组中。

示例：

[].includes(something);

回答您的密码。

<input type="checkbox" :value="category.id" :checked="categoryCountry.includes(category.id)">

Answer 2

使用v-if如果你可以传递一个函数，你可以在vue中创建一个检查你的数组的方法，如

checkInArray: (needle, haystack) {
    return haystack.includes(needle)
}

输入

<input v-if="checkInArray(categoryCountry, categories)"

Array.prototype.includes（）返回一个bool true / false，足以满足条件v-if

Answer 3

如果您收到一个数组，并且需要将数组的每个项目显示为输入复选框，则应遍历每个数组项：

// Template example
<div id='check_box_sample'>
  <div v-for="category in categoryCountries">
    <input 
      type="checkbox" 
      :id="category"
      :value="category"
      v-model="checkedCategories">
    <label 
      :for="category">
      {{ category }}
    </label>
  </div>
  <br>
  <span>Checked names: {{ checkedCategories }}</span>
</div>

因此，对于v-for="category in categoryCountries"上的每次迭代，您都要创建一个输入类型复选框，您必须定义一个标识:id="category"和一个值:value="category"，因为这只是一个我只是使用的简单示例相同的数组项。

您可能希望看到working example

我希望这对你有所帮助。

如何在vue组件中创建数组？

3 个答案: