Vue.js选择特定值

我在我的HTML这些行：Vue.js选择特定值

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

我已经定义了$用户变量是这样的：

<?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没有帮助。

感谢

来源

2017-07-14 Maramal

你的print_r（$用户）''后能得到什么？ – Tajgeer

用户已成功呈现。 A $ user是一个对象 – Maramal

您应该使用'：value.sync'选项进行双向值同步 –

虽然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>

来源

2017-07-14 13:52:39

非常好，现在正在工作。非常感谢你。 – Maramal

试试这个：

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

来源

2017-07-14 13:35:07

你没有得到问题，信息很好地显示。问题出在我提交表格之后。 – Maramal

Vue.js选择特定值

回答

相关问题