使用 vue-for 制作选择标签答案

【问题标题】：making select tag with vue-for使用 vue-for 制作选择标签
【发布时间】：2020-04-16 05:56:04
【问题描述】：

我目前正在使用 Argon 为 vue.js 开发前端。免费的 Argon 模板不支持 base-input 的类型选择，所以我决定自己制作。这是我的代码：

<template>
// ...
<base-input alternative
  type="select"
  :options="genders"
  addon-left-icon="ni ni-circle-08">
</base-input>
// ...
</template>

<script>
export default {
  name: 'app-footer',
  data() {
    return {
      genders: [
        { value: 0, text: 'Select Gender' },
        { value: 1, text: 'Male' },
        { value: 2, text: 'Female' }
      ]
    }
  }
}
</script>

BaseInput.vue：

<template>
// ...
<slot v-bind="slotData">
            <select v-if="$attrs.type==='select'"
                    :value="value"
                    v-on="listeners"
                    v-bind="$attrs"
                    class="form-control"
                    :class="[{'is-valid': valid === true}, {'is-invalid': valid === false}, inputClasses]"
                    aria-describedby="addon-right addon-left">
                <option v-for="(option, index) in $attrs.options"
                    :key="index"
                    v-bind:value="option.value">
                    {{$t(option.text)}}
                </option>
            </select>
            <input
                    v-else
                    :value="value"
                    v-on="listeners"
                    v-bind="$attrs"
                    class="form-control"
                    :class="[{'is-valid': valid === true}, {'is-invalid': valid === false}, inputClasses]"
                    aria-describedby="addon-right addon-left">
        </slot>
// ...
</template>

但是，它只呈现以下 html：

<select aria-describedby="addon-right addon-left" type="select" class="form-control"></select>

这里有什么问题？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

我找到了解决方案。我用options 做道具。在 vue.js 中，options 是保留关键字。我用optionlist 替换了它，效果很好。

【讨论】：