vue-strap `select` 组件答案

【问题标题】：vue-strap `select` componentvue-strap `select` 组件
【发布时间】：2016-05-26 04:47:44
【问题描述】：

我正在使用 vue-strap 的 select 组件，文档：http://yuche.github.io/vue-strap/#select , 我的演示是文档中的第一个示例。

我的演示： https://jsfiddle.net/kanjiushi/ne92wfxp/6/

我有 2 个关于我的演示的问题：

1、文档的demo中有一个占位符Nothing Selected，如何添加到我的demo中？

我的演示：

文档中的演示：

2、如何获取选中项的值并保存在变量中？我会用它来发送ajax请求。

请帮忙，在此先感谢。

【问题讨论】：

你能做一个jsfiddle吗？
@bobbybackblech 我做了一个 jsfiddle。

标签： javascript vue.js

【解决方案1】：

您错过了:value.sync 指令。这解决了你的两个问题。检查this fiddle 的结果。这里也是代码

<v-select :value.sync="val">
   <v-option value="1">Apple</v-option>
   <v-option value="2">Banana</v-option>
   <v-option value="3">Cherry</v-option>
   <v-option value="4">Orange</v-option>
   <v-option value="5">Grape</v-option>
</v-select>

请注意，我必须向您的组件添加 val 数据。

【讨论】：

非常感谢！还有一件事，如何将占位符“Nothing Selected”更改为自定义文本？
placeholder 是v-select 组件的一个属性，所以在模板中传递它，像这样<v-select :value.sync="val" placeholder="Some placeholder">
注意value和placeholder属性的调用是不同的
再次感谢，我还有个问题，我在这个demo中加了一个foreach，像这样：jsfiddle.net/ne92wfxp/8，如何取出v-select组件重复使用？
假设您所说的 foreach 来自服务器端模板，则应该重复 v-select 组件。我的建议是在 vue 中加载您的服务器数据并使用 v-for 循环