用于选择的 Vue.js 选项组件

Posted

技术标签:

【中文标题】用于选择的 Vue.js 选项组件【英文标题】:Vue.js option component for select 【发布时间】:2017-03-25 16:09:58 【问题描述】:

我正在尝试创建这个组件:

<template>
  <option v-for="(text, value) in options" :value="value">
     text 
  </option>
</template>

但我收到此错误消息:

模板语法错误不能在有状态组件根元素上使用 v-for,因为它会渲染多个元素

我怎样才能创建这种组件? 我正在使用 vue 2.0.5

以下是一些相关文档:https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

【问题讨论】:

您的选项变量看起来如何,您可以在问题中添加这个以及您使用的是哪个版本的 Vue? 我创建了一个jsfiddle,这似乎工作正常,这里有什么问题? 现在尝试将选项转换为组件 组件应该有一个根元素,v-for 显然会呈现多个元素。将其包装在父元素中。 当然,但是选项标签不能被包装,有什么解决方法吗?渲染后可能有某种解包方式。 【参考方案1】:

您不能在组件内执行此操作,您需要一个***元素,因此您需要将其包装在一个选择中并将整个选择框作为您的组件。然后,您需要将任何选项作为道具传递,所以:

模板:

<template id="my-select">
  <select>
    <option v-for="(text, value) in options" :value="value">
       text 
    </option>
  </select>
</template>

组件:

Vue.component('my-select', 
  props: ['options'],
  template: "#my-select"
);

查看模型:

new Vue(
  el: "#app",
  data: 
    options: 
      "1": "foo",
      "2": "bar",
      "3": "baz"
    
  
);

现在在您的根页面中,只需将选项作为道具传递:

<my-select :options="options"></my-select>

这是 JSFiddle:https://jsfiddle.net/zL6woLa2/

【讨论】:

既然这是唯一的方法,那么这是让 v-model 再次工作的正确方法吗? jsfiddle.net/neves/zL6woLa2/1 为什么插槽在 select 中不起作用? 我觉得这看起来不错。就个人而言,我尝试将与组件相关联的所有内容保留在组件中,因此我可能会将 v-model 保留在组件中,并将 $emit 保留为事件中的 bus。我不确定为什么 slot 在这里不起作用,但是将默认选项作为道具传递并在传递值时显示它可能更容易。这是您的小提琴的更新版本,但正如我所说,这就是我的做法,所以如果您愿意,请坚持使用您的解决方案:jsfiddle.net/08qr3rL9

以上是关于用于选择的 Vue.js 选项组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在选项选择上显示响应? (vue.js 2)

在 vue.js 组件中渲染子组件

如何在 vue js 中使用 html 的选择选项仅显示该类别的服务?

vue.js 混入

axios GET 中的 vue.js 多选更改选项

vue组件