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選擇特定值

回答

相關問題