从选定的下拉列表中获取价值 Vue Js

Question

我有一个问题，我真的很困惑如何从表单绑定 vue js 中获取价值。我试过了 –> https://v2.vuejs.org/v2/guide/forms.html#Select 。但我总是收到诸如 –> 属性或方法“selected”未在实例上定义但在渲染期间引用的错误。确保在数据选项中声明响应式数据属性。 我的代码有什么问题？

这是我的代码：

 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>

原文由 userpr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不好意思，稍微看错了你的帖子，所以忽略数据部分。没有意识到您在数据中创建了一个数据对象。下面是一个代码示例，应该与您的代码非常匹配。这里的问题是，当点击按钮时，它会将新元素添加到搜索下拉列表中，但您实际上还没有选择任何内容，因此控制台输出将是一个空字符串。如果您随后选择某些内容并再次单击该按钮，您将获得一个值。

 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" 因为您选择的变量是数据对象的属性，这是您在此范围内可用的唯一变量。

原文由 OwChallie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@kevlai22 已经给了你一个可运行的代码片段，我想告诉你为什么你收到警告消息 Property or method “selected” is not defined on the instance but referenced during render.确保在数据选项中声明响应式数据属性。 .

这仅仅是因为您返回了带有嵌套数据对象的数据对象，所以 v-model="selected" 将不起作用，但 v-model="data.selected" 将起作用。实际上，您不需要返回嵌套对象，只需使用这样的代码即可。

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

检查 工作演示。

原文由 choasia 发布，翻译遵循 CC BY-SA 3.0 许可协议