Question

我的HTML中有这些行：

<v-select v-model="user2_id" :options="[{!! $users !!}]" class="select">
</v-select>
<input type="hidden" v-model="user2_id" name="user2_id">

我已经定义了这样的$ users变量：

<?php
    $lusers = '';

    foreach($users as $user)
    {
        if($user->id !== Auth::user()->id)
            $lusers .= '{label: \'' . $user->name . '\', value: ' . $user->id . '},';
    }
    $users = trim($lusers, ',');
?>

这些生成以下行：

:options="[{label: 'user 1', value: 1},{label: 'User 2', value: 2}]"

数据显示成功。

当我提交表单时，我得到了这个："user2_id" => "[object Object]"。我需要user2_id => 2（即）。完成这项工作的正确方法是什么？我曾尝试使用v-model="user2_id.value"，但无效。

original documentation没有帮助。

由于

Answer 1

虽然v-select足够聪明，可以查找要用于显示的label成员，但它会继续使用整个对象作为值。

由于您的隐藏输入不是交互式的，因此您不需要v-model的双向绑定。只需使用:value=user2_id.value代替。在我的片段中，我将其作为文本输入，以便您可以看到正在发生的事情。

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data: {
    user2_id: null
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//rawgit.com/sagalbot/vue-select/master/dist/vue-select.js"></script>
<div id="app">
  <v-select v-model="user2_id" :options="[{label: 'user 1', value: 1},{label: 'User 2', value: 2}]" class="select">
  </v-select>
  <input type="text" :value="user2_id && user2_id.value" name="user2_id">
  <div>{{JSON.stringify(user2_id)}}</div>
</div>

Answer 2

试试这个：

<v-select v-model="user2_id" :options="[!! $users !!]" class="select">
</v-select>

Vue.js选择特定值

2 个答案: