Question

我有一个问题，我真的很困惑如何从表单绑定vue js获取值。我试过 - ＆gt; https://vuejs.org/v2/guide/forms.html#Select。但我总是得到错误，如 - ＆gt; 财产或方法＆＃34;已选择＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明被动数据属性。我的代码有什么问题？

这是我的代码：

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

@ kevlai22已经为您提供了一个可运行的代码段，我想告诉您为什么会收到警告消息属性或方法＆＃34;已选中＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。 这只是因为您使用嵌套数据对象返回数据对象，因此v-model="selected"不会工作，v-model="data.selected"会工作。实际上，您不需要返回嵌套对象，只需使用这样的代码即可。

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

检查working demo。

Answer 2

不能以这种方式使用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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我还将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' }
    ]
  }
})

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

4 个答案: