如何在Vue中有条件地设置选定的选项

Posted 2023-02-23

【中文标题】如何在Vue中有条件地设置选定的选项

【英文标题】：How to conditionally set selected option in Vue

【发布时间】：2018-07-02 15:40:14

【问题描述】：

是否可以预先设置选择框的选中值？

使用 Vue (v2)，我尝试在 Vue 模板中创建一个像这样的选择框。

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           :selected="selectedFlavor == flavor"> flavor </option>
</select>

还有一个像这样的组件：

Vue.component('flavor-pane', 
      ...
      data: function() 
          selectedFlavor: 'strawberry',
          flavors: ['blueberry', 'lime', 'strawberry'],
      );

本质上，这个想法是我需要循环一个简单的数组，在一个选择框中创建几个选项，并将选择框的值设置为现有值。我可以这样做吗？

我的模板/组件渲染良好，但即使满足条件并且选择框中没有选择值，selected 属性似乎也不会出现在 html 中。

【参考方案1】：

是的，这是可能的。 我创建了这个例子https://jsfiddle.net/Luvq9n4r/2/ 来帮助你。 要更改选定的值，只需设置模型。 如果它不是你需要的，请也做一个小提琴。

谢谢。

new Vue(
  el: '#app',
  data: function() 
    return 
      selectedFlavor: 'lime',
      flavors: ['blueberry', 'lime', 'strawberry']
    
  ,
  methods: 
    change: function() 
      this.selectedFlavor = 'strawberry';
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="change()">Set Strawberry</button>
  <select v-model="selectedFlavor">
    <option v-for="flavor in flavors" :value="flavor">flavor</option>
  </select>
</div>

【讨论】：

您的回答很好，但我意识到我的问题可能措辞不当。我需要有条件地在 标记内应用selected 属性。我希望能够在值上下文逻辑之外使用一些额外的东西来确定是否应该预先选择该选项。见jsfiddle.net/m262un97/6。虽然，既然我这么说，我意识到我可以简单地预先计算 selectedFlavor 并将逻辑放入组件中。嗯。

对，就是这样，预先计算selectedFlavor。我不知道设置selected 属性是否会反映在模型上。但是在控制器上计算 selectedFlavor 属性和设置工作正常。

github.com/vuejs/vue/issues/308 似乎回答了这个问题，可能与此评论有关：github.com/vuejs/vue/issues/308#issuecomment-314248619 - 这解决了我的问题

【参考方案2】：

您在选择时使用v-model 和selectedFlavor 是正确的。这样做binds the value的选择框的值为selectedFlavor。当您更改selectedFlavor 的值时，您会更改选择元素的值。这是双向的； IE。如果您更改选择框，您还将更改selectedFlavor 的值（即two-way data binding、reactivity）。

更改 select 元素的值也会更改哪个 option 元素具有 selected 属性。您可以使用此 v-model 数据绑定来实现您的目标，但这只是功能等效的结果。您的用例可能会有所不同。

如果您可以使用此方法更改选择框的值，那么在data 对象中设置selectedFlavor 的初始值将实现您设置选择框默认值的目标，因此哪个选项元素具有选定的属性。

您可以通过直接更改绑定到的数据模型的值或（最好）通过某种状态管理（例如Vuex）来更改选择框的值。状态管理回答了有关根据来自其他事件、数据源、API、Web 套接字等的动态数据管理选择状态的更大问题......

我直接修改下面selectedFlavor 的值只是为了突出基本概念，但我也试图暗示这在状态管理范式中可能是什么样子。

<select v-model="selectedFlavor">
   <option v-for="flavor in flavors" 
           :value="flavor"
           @change="onChangeFlavour"
           > flavor </option>
</select>

new Vue(
  el: '#app',
  data() 
    return 
      selectedFlavor: 'lime', // Default value is set here
      flavors: ['blueberry', 'lime', 'strawberry']
    
  ,
  methods: 
    onChangeFlavour(event) 
      // do what you want with the new value when the select box is changed
      console.log(event.srcElement.value);
      // OR preferably
      console.log(this.selectedFlavor); // because binding
    ,
    setFlavour(newFlavour)
      // change the value
      this.selectedFlavor = newFlavour;
    
  
);

【参考方案3】：

您可以使用 jquery 和 vue 在线选择一个选项。

1.包括 jquery

window.$ = require('jquery');
window.JQuery = require('jquery');

2。 HTML/php 更新 在select tag 中添加data-selected 字段。

<select v-model="company" name="company" data-selected=" $document->company_id ">
   <option value=" $company->id "> $company->name </option>
</select>

3. Vue 更新

const app = new Vue(
   el: '#app',
   data: 
      company: '',
      companies: '',
   
   methods: 
      getCompanies: function () 
         axios.post('/company/getdata').then(function (response) 
            app.companies = [];
            app.companies = response.data;

            // Check if .editCompany is present. 
            if ($('.editCompany').length > 0) 
               app.company = $('.editCompany').data('selected');
            
         ).catch(error => console.log(error));
      ,
   ,
   created: function () 
      this.getCompanies();
   
);

【讨论】：

非常糟糕的建议