Question

将select元素绑定到对象（而不是字符串值）但是仍然让HTML元素提交字符串值的正确方法是什么？

我已经设法让这个工作，但几乎看起来我正在利用一个错误：

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" v-bind:value="item" value="{{ item.id }}">{{ item.name }}</option>
</select>

这可以按预期工作：“selected”属性附加到“item”对象，但表单仅POST项目的ID。但是，如果我颠倒了HTML属性的顺序，那么value = {{item.id}}出现在v-bind：value =“item”之前，那么表单POST“[Object]”而不是，例如，“ 3" 。

它太脆弱的事实让我觉得我做错了什么。

那么处理这个问题的正确方法是什么？

Answer 1

我在两种情况下都看到，HTML呈现如下：

<select>
  <option value="[object Object]">name1</option>
  <option value="[object Object]">name2</option>
  <option value="[object Object]">name3</option>
  <option value="[object Object]">name4</option>
</select>

案例1：v-bind:value="item" value="{{ item.id }}"：fiddle

案例2：value="{{ item.id }}" v-bind:value="item"：fiddle

因此，就呈现的HTML而言，两种情况都是等价的。如果没有混淆的话，理想的方法就是使用v-bind:value="item"，如下所示：

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" v-bind:value="item">{{ item.name }}</option>
</select>

您应该v-bind到item或item.id，具体取决于您要为selected变量分配的内容。

Answer 2

我有类似的情况，我在其中构建了几个可以在vue组件或标准表单中使用的vue组件。

iconv -f ORIGINAL_ENCORDING (utf-8) -t utf-8 -c yourfile.sql

似乎是你所追求的。我也成功使用了计算属性或过滤器，但我认为stringify最具可读性。

Answer 3

我使用这种方法修复了它：

<select v-model="product">
  <option v-for="obj in choices" :value="obj">{{ obj.name }}</option>
</select>
<input type="hidden" name="product" :value="choice.id">

总结：不要给你的select一个名字，而是给你的hidden输入提供该名称，并在该元素上提供ID作为值。

VueJS将select绑定到object但仍然是POST字符串

3 个答案: