從選定的下拉 Vue Js 中獲取價值

Question

我有一個問題，我真的很困惑如何從表單綁定 vue js 中獲取價值。 我試過 --> https://v2.vuejs.org/v2/guide/forms.html#Select 。 但我總是收到錯誤，例如 -->屬性或方法“選定”未在實例上定義，但在渲染期間被引用。 確保在 data 選項中聲明反應數據屬性。 我的代碼有什么問題？

這是我的代碼：

data: function() {
  return {
    data: {
      options: {},
      selected: ''
    }
  };
},
methods: {
  Search: function() {
    var vm = this;

    var types = [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ];

    vm.data.options = types;

    console.log(vm.data.selected);
  }
}

這是我的html代碼：

<select v-model="selected" class="form-control sl">
    <option v-for="option in data.options" v-bind:value="option.id">
        {{ option.value }}
    </option>
</select>

Answer 1

這些methods不能以這種方式使用，並且您實際上根本不需要任何方法來獲取value 。 這是一個工作示例：

 const app = new Vue({ el: '#app', data: { selectedOption: undefined, chosenColor: 'transparent', colorMappings: { ID: 'red', Title: 'green', Category: 'blue', 'Nama User': 'orange' }, widthMappings: { ID: '2px', Title: '4px', Category: '6px', 'Nama User': '8px' }, types: [ { "id": "id", "value": "ID" }, { "id": "title", "value": "Title" }, { "id": "category", "value": "Category" }, { "id": "username", "value": "Nama User" } ] }, watch: { selectedOption(newVal) { this.chosenColor = this.colorMappings[newVal] } }, computed: { chosenWidth() { return this.widthMappings[this.selectedOption] || '1px' } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <select v-model="selectedOption"> <option disabled value="">Please select one</option> <option v-for="type in types" v-bind:value="type.value">{{type.value}}</option> </select> <span v-bind:style="{ 'background-color': chosenColor, 'border': 'solid ' + chosenWidth + ' black' }">Selected: {{ selectedOption }}</span> </div>

Answer 2

@kevlai22 已經為您提供了一個可運行的代碼片段，我想告訴您為什么您收到警告消息屬性或方法“選定”未在實例上定義但在渲染期間引用。 確保在 data 選項中聲明反應數據屬性。 .
這只是因為您返回帶有嵌套數據對象的數據對象，所以v-model="selected"不起作用但v-model="data.selected"會。 實際上，您不需要返回嵌套對象，只需使用這樣的代碼。

data: function() {
  return {
      options: [],
      selected: ''
  };
},

檢查工作演示。

Answer 3

抱歉，稍微誤讀了您的帖子，因此請忽略數據部分。 沒有意識到您在數據中創建了一個數據對象。 下面是一個應該與您的代碼非常匹配的代碼示例。 這里的問題是，當單擊按鈕時，它會將新元素添加到搜索下拉列表中，但您實際上還沒有選擇任何內容，因此控制台輸出將是一個空字符串。 如果您隨后選擇某些內容並再次單擊該按鈕，您將獲得一個值。

 Vue.component('select-component', { template: '<div>\ <select v-model="data.selected" class="form-control sl">\ <option v-for="option in data.options" v-bind:value="option.id">\ {{ option.value }}\ </option>\ </select>\ <button v-on:click="Search">Populate List</button>\ </div>', data: function() { return { data: { options: {}, selected: '' } }; }, methods: { Search: function() { var vm = this; var types = [ { "id": "id", "value": "ID" }, { "id": "title", "value": "Title" }, { "id": "category", "value": "Category" }, { "id": "username", "value": "Nama User" } ]; vm.data.options = types; console.log(vm.data.selected); } } }); var vm = new Vue({ el: '#app' });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <select-component></select-component> </div>

請注意，我還將v-model="selected"更改為v-model="data.selected"因為您選擇的變量是數據對象的屬性，它是您在此范圍內可用的唯一變量。

Answer 4

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})