首页 文章

从选定的下拉Vue Js获得 Value

提问于
浏览 次
-1

我有一个问题，我真的很困惑如何从形式绑定vue js获取 Value . 我试过 - > https://vuejs.org/v2/guide/forms.html#Select . 但我总是得到错误，如 - > Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 我的代码出了什么问题？

Here is my code :

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

Here is my html code :

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

3 回答

  • 0

    @ kevlai22已经给你一个可运行的代码片段，我想告诉你为什么你得到了警告消息属性或方法"selected"没有在实例上定义但在渲染期间被引用 . 确保在数据选项中声明反应数据属性 .
    这只是因为您使用嵌套数据对象返回数据对象，因此 v-model="selected" 将无效，但 v-model="data.selected" 将无效 . 实际上，您不需要返回嵌套对象，只需使用这样的代码 .

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

    检查working demo .

    回复于
  • 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>
    回复于
  • 0

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

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

    回复于

相关问题