代码之家 › 专栏 › 技术社区 › rob

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

vue-component frontend vuejs2 javascript

rob · 技术社区 · 7 年前

是否可以预先设置选择框的选定值?

使用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中。

3 回复 | 直到 6 年前

lmarqs 4 年前

是的,这是可能的。我创建了这个示例 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>

Strixy 6 年前

你在正确的轨道上使用 v-model 和 selectedFlavor 在选择上。这样做 binds the value 选择框的 精选风味 . 当您更改 精选风味 您可以更改select元素的值。这是双向的;例如,如果更改选择框,还将更改 精选风味 (即 two-way data binding , reactivity ).

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

如果可以使用此方法更改选择框的值,则设置 精选风味 在 data 对象将实现设置选择框的默认值的目标,从而确定哪个选项元素具有选定属性。

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

我正在直接修改 精选风味 下面仅强调基本概念,但我也试图暗示在状态管理范式中这可能是什么样子。

<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

Eugine Joseph 5 年前

您可以将jquery与vue结合使用,在线选择选项。

1、包含jquery

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

2、HTML/PHP更新
添加 data-selected 字段输入 select tag .

<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();
   }
});