Question

我使用<input>在Vue.js上下文中选择一个值。上下文并不重要（我相信） - 这只是说<input>字段的值始终与名为searchedName的变量同步，并且没有实际的＆＃34;提交＆＃34 ;输入（因为它始终可用）：

＆＃13;

<!-- in Vue.js the line reads <input v-model="searchedName" list="foundNames"> and the input content is synchronized with the variable searchedName -->
<input id="searchedName" list="foundNames">
<datalist id="foundNames">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</datalist>

＆＃13;

从下拉列表中选择一个值时，选择此精确字符串（例如One）。

但是，我希望这个字符串只是一个显示名称，而实际的选择是一个Object。例如，从下拉列表中选择One时，我希望进一步传递{"choice": "one", "value": 1, "weather": ["cloudy", "rainy"]} - 而不是字符串"One"。

这可能吗？

编辑：以防万一，我发布了处理此位的实际Vue.js代码。 foundNames在其他地方（在AJAX调用中）更新，并且是一个对象数组。 addID方法应该使用{{name._source}}，它当前显示为它。我想隐藏它并显示它的一些元素。

         <label for="something">
            Input "Something": 
            <input v-model="searchedName" list="foundNames">
            <datalist id="foundNames">
                <option v-for="name in foundNames" value="name">{{name._source}}</option>
            </datalist>
        </label>
        <button v-on:click="addID">add name</button>

看看第一个答案，要走的路是

<option v-for="name in foundNames" value="name">{{name._source.interesingelementtodisplay}}</option>

但value="name"将值设置为"name"（逐字），而不是name次迭代中变量v-for的当前值。

Answer 1

只需value就可以做你想要的第一件事。

<input id="searchedName" list="foundNames">
<datalist id="foundNames">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</datalist>

Answer 2

我曾经遇到过类似的问题，我做的是这样的事情

<datalist id="foundNames">
  <option value="{'choice': 'one', 'value': 1, 'weather': ['cloudy', 'rainy']}">One</option>
  <option value="{'choice': 'two', 'value': 2, 'weather': ['cloudy', 'rainy']}">Two</option>
  <option value="{'choice': 'three', 'value': 3, 'weather': ['cloudy', 'rainy']}">Three</option>
</datalist>

注意我必须改变一点JSON才能使用单引号，然后将其解析回JSON我已经返回双引号。现在可能有些lib，就像这个https://github.com/jcoc611/cassandraMAP

Answer 3

编辑中的答案很接近。您需要bind该值。

<option v-for="name in foundNames" :value="name">{{name._source.interesingelementtodisplay}}</option>

或

<option v-for="name in foundNames" v-bind:value="name">{{name._source.interesingelementtodisplay}}</option>

请注意:前面的value。如果你没有绑定它，它只是引号之间的字面值，正如你所发现的那样，只是name。

如何从<input />传递所选择的值的不同值

3 个答案: